A large number of high-resolution images can indeed make a Web site radiant. But the same can also cause the site access speed drop-the picture is a file, the file will occupy bandwidth, and bandwidth directly related to the access wait time. Now, let's learn a little trick called image preloading to improve the speed of image access.
Some browsers try to resolve this problem by saving the pictures in the local cache. This allows you to call the pictures sequentially-but there will still be a delay for the first time you use them. Pre-loading is a technique for downloading pictures to the cache before a picture is needed. In this way, you can quickly recover a picture from the cache and display it immediately when you really need to display it.
Image () object
The simplest way to preload an image is to create a new image () object using JavaScript, and then pass the URL of the picture you want to preload to this object. Suppose we have a picture file called Heavyimagefile.jpg, which we want to display when the user's mouse pointer moves over an existing picture. In order to preload this file faster, we simply created a new image () object named Heavyimage, and then loaded it into the page synchronously via the onload () event handle.
Copy Code code as follows:
<script language = "JavaScript" >
function Preloader ()
{
Heavyimage = new Image ();
HEAVYIMAGE.SRC = "Heavyimagefile.jpg";
}
</script>
<body onload= "Javascript:preloader ()" >
<a href= "#" onmouseover= "javascript:document.img01.src= ' heavyimagefile.jpg '" >
</a>
</body>
Note that the label (tag) itself does not handle onmouseover () and onmouseout () events, which is why the tags in the above example are included in the <a> tag. The label <a> includes support for these event types.
load multiple pictures through an array (arrays)
In reality, you'll probably need to have more than one picture installed, for example, for a menu bar that includes multiple pictures, or for a smooth animation effect. It's not difficult to do this, just take advantage of the JavaScript array, as shown in the following example:
Copy Code code as follows:
<script language= "JavaScript" >
function Preloader ()
{
Counter
var i = 0;
Create Object
Imageobj = new Image ();
Set Image list
Images = new Array ();
images[0]= "Image1.jpg"
images[1]= "Image2.jpg"
images[2]= "Image3.jpg"
images[3]= "Image4.jpg"
Start preloading
for (i=0; i<=3; i++)
{
Imageobj.src=images[i];
}
}
</script>
In the above example, the variable I and the image () object named Imageobj are defined. Then define the new array images[], each array element will store the address source that needs to be preloaded with the picture. Finally, a for () loop is used to iterate through the entire array and specify an image () object for each element to preload the picture into the cache.
