|
|
preload an image
Image preloading is as essential skill that you’ll use repeatedly. Consider this: you’ve loaded your page and have a menu system that uses images that change as the mouse floats over them. Once the page is loaded the user does so, but there is a lag between the mouse passing over that area and the new image being displayed. This is because the browser has to fetch the new image and display it. This lag can be eliminated if you preload the image into a variable as the page loads and trigger its display as the mouse floats over it. The process is essentially immediate and is a great affect.
<html>
<head>
<script type="text/javascript">
img2=new Image();
img2.src="landscape3.gif";
function changeImage() {
document.getElementById('myImage').src=img2.src;
}
</script>
</head>
<body>
<p>When you mouse over the image, a new image will appear.</p>
<img id="myImage" onmouseover="changeImage()" width="160" height="120" src="landscape2.jpg">
<p>The new image appears instantly, because your browser has already loaded the image.</p>
</body>
</html>
We use an onMouseOver event to trigger the JavaScript function that is stated in the HEAD of the document. The original image is displayed until the mouse floats over it. The new image is then displayed. Note that if you’d like to change back to the original image you’d have to provide a different function name with the original file name and trigger it with an onMouseOut event.
| |
