Home >Web Front-end >JS Tutorial >JS implements image preloading without waiting_javascript skills

JS implements image preloading without waiting_javascript skills

WBOYOriginal: 2016-05-16 17:45:53947browse

When developing websites, it is often necessary to browse a large number of pictures on a certain page. If traffic is considered, each page can only display one picture like pconline, so that users need to download it again every time they view a picture. Click the entire page. However, in the web2.0 era, more people are willing to use JavaScript to implement an image browser, so that users can see other images without waiting for too long.

After knowing the address of an image, you need to display it in a fixed-size html container (can be a div, etc.). The most important thing is of course to know the width and width of the image to be displayed. height, and then combine the width and height of the container to display the image according to a certain scaling ratio. Therefore, image preloading has become the core function of image browsers.

Friends who have done image flip effects actually know that in order to avoid waiting when rotating images, it is best to download the images locally and let the browser cache them. At this time, the Image object in js is generally used. The general method is nothing more than this:

Copy code The code is as follows:

 
function preLoadImg(url) { 
var img = new Image(); 
img.src = url; 
} 

By calling the preLoadImg function and passing in the url of the image, the image can be pre-downloaded Came down. In fact, the pre-download function used here is basically the same. After the image is pre-downloaded, you can know the width and height of the image through the width and height attributes of img. However, you need to consider that when using the image browser function, the images are displayed in real time. For example, when you click the displayed button, the code similar to the above will be called to load the image. Therefore, if you use img.width directly, the image has not been completely downloaded. Therefore, some asynchronous methods need to be used to wait until the image is downloaded before calling the width and height of img.

It is actually not difficult to implement such an asynchronous method, and the image download completion event is also very simple, it is a simple onload event. Therefore, we can write the following code:

Copy the code The code is as follows:

 
function loadImage (url, callback) { 
var img = new Image(); 
img.src = url; 
img.onload = function(){ //The callback function is called asynchronously when the image is downloaded. 
callback.call(img); // Switch the this pointer of the callback function to img. 
}; 
} 

Okay, let’s write another test case.

Copy code The code is as follows:

function imgLoaded(){
alert(this. width);
}

at I tested it in Firefox and found that it works well. It works as expected. After the image is downloaded, the width of the image will pop up. No matter how many times you click or refresh the results are the same.

However, if you achieve this step, don’t be too happy - you also need to consider the compatibility of the browser, so quickly go to IE to test it. Yes, the width of the image also pops up. However, when I click load again, the situation is different and there is no response. Refresh, same thing.

After testing multiple browser versions, we found that this happens with IE6 and Opera, while Firefox and Safari behave normally. In fact, the reason is quite simple, it is because of the browser's cache. After the image has been loaded once, if there is another request for the image, since the browser has already cached the image, it will not initiate a new request, but load it directly from the cache. For Firefox and Safari, they make the two loading methods transparent to the user, which will also cause the onload event of the image. However, IE and Opera ignore this identity and will not cause the onload event of the image. Therefore, the above code is No effect can be achieved within them.

What should I do? The best case is that the Image can have a status value indicating whether it has been loaded successfully. When loading from the cache, because there is no need to wait, this status value directly indicates that it has been downloaded. When loading from the http request, because it needs to wait for the download, this value is displayed as incomplete. In this case, it can be done.

After some analysis, I finally found an Image attribute that is compatible with various browsers - complete. Therefore, just make a judgment on this value before the image onload event. Finally, the code becomes as follows:

Copy the code The code is as follows:

 
function loadImage(url, callback) { 
var img = new Image(); //Create an Image object to pre-download images 
img.src = url; 
if (img.complete) { // If the image already exists in the browser cache, call the callback function directly 
callback.call(img); 
return; // Return directly without processing the onload event 
} 
img.onload = function () { //Asynchronously call the callback function when the image is downloaded. 
callback.call(img);//Replace this of the callback function with the Image object 
}; 
}; 

After so much trouble, finally everyone All browsers meet our goals. Although the code is very simple, it solves the core problem of the image browser. All you have to do next is how to present the image. Let’s look at another method:

Copy code The code is as follows:

js to implement image pre-setting Execute the action after loading