Core of JavaScript image browser-image pre-loading

During website development, you often need to browse a large number of images on a certain page. If you consider traffic, you can display only one image on each page like pconline, each time you see an image, you need to download the entire page again. However, in the web era, more people are willing to use JavaScript to implement an image browser, allowing users to see other images without waiting too long.

After knowing the address of an image, you need to display it in a fixed HTML container (such as Div, the most important thing is to know the width and height of the image to be displayed. Then, combine the width and height of the container to display the image according to a certain scaling ratio. Therefore, image pre-loading becomes the core function of the image browser.

Anyone who has done image flip knows that it is best to first download the image to a local place and cache it for the browser to avoid waiting during image rotation. In this case, the image object in JS is usually used. The general method is nothing more than this:

Function Preloadimg (URL) {
VaRIMG= NewImage ();
IMG. SRC=URL;
}

By calling the preloadimg function and passing in the image URL, you can download the image in advance. In fact, the pre-download function used here is basically the same as this. After the image is pre-downloaded
IMG's width and height attributes let you know the width and height of the image. However, when using the image browser, images are displayed in real time. For example, if you click the displayed button
Will call the above similarCodeTo load images. Therefore, if you use IMG. Width Directly, the image has not been completely downloaded. Therefore, some asynchronous methods are required to wait until the image
After the download is complete, the width and height of the IMG are called.

In fact, it is not difficult to implement such an asynchronous method. The download event is also very simple, that is, a simple onload event. Therefore, we can write the following code:

Function LoadImage (URL, callback) {
VaR IMG =   New Image ();
IMG. SRC = URL;

IMG. onload =   Function () {//Call the callback function asynchronously when the image is downloaded.
Callback. Call (IMG );//Switch the callback function this pointer to IMG.
} ;
}

Now, write a test case.

Function imgloaded (){
Alert (this. width );
}
< Input Type = "Button" Value = "LoadImage" Onclick = "Loadimage('aaa.jpg ', imgloaded )" />

Test it in Firefox and find it is good. It is indeed the same as expected. After the image is downloaded, the image width will pop up. The results are the same no matter how many clicks or refreshes.

However, to do this, don't be too happy-you still need to consider the compatibility of the browser, so hurry to test it in IE. That's right. The image width is also displayed. However, when you click load again, the situation is different and no response is returned. Refresh the page.

After tests on multiple browser versions, we found that IE6 and opera both work like this, while Firefox and Safari work normally. In fact, the reason is also quite simple, because the browser cache
. After an image is loaded once, if a request is sent to the image again, the browser will not initiate a new request because the image has been cached, instead, it is directly loaded from the cache. For
Firefox and Safari. Their views make these two loading methods transparent to users, which will also cause the onload event of images, while IE and opera ignore this identity and will not lead
The onload event of the image, so the above Code cannot achieve the effect in them.

What should we do? The best case is that the image may have a status value indicating whether it has been loaded successfully. When loading from the cache, because you do not need to wait, this status value directly indicates that it has been downloaded. When loading from an HTTP request, this value is not displayed because you need to wait for download. In this way, you can do it.

After some analysis, we finally found a property of the image compatible with various browsers-complete. Therefore, make a judgment on this value before the image onload event. Finally, the Code becomes as follows:

Function LoadImage (URL, callback) {
VaR IMG =   New Image (); // Create an image object to implement pre-download of the image
IMG. SRC = URL;

If (IMG. Complete) {//If the image already exists in the browser cache, call the callback function directly.
Callback. Call (IMG );
Return;//Direct return, no need to process the onload event
}

IMG. onload =   Function () {//Call the callback function asynchronously when the image is downloaded.
Callback. Call (IMG );//Replace this of the callback function with an image object.
} ;
} ;

After so much effort, we finally made every browser meet our goal. Although the Code is very simple, it solves the core problem in the image browser. What you need to do next is just how to present the image.