js image preloading example_basic knowledge

JS image preloading simple example

Copy code The code is as follows:

function loadImage( url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
           callback(img);
              else { ;
                                                                                                                       > }
}

loadImage(pic_url,loadImage);



Another detailed example

Manipulating the DOM through js is often used to achieve asynchronous loading of the html elements of the current page. Let me talk about some understanding of the Image object.
Look at an example:

Copy code

The code is as follows:


When the page contains the above code "tt.jpg" is not loaded when opening, but is loaded when the button is clicked. When the loading is completed, the onload event is triggered and displayed on the page.
If you load the "tt.jpg" image for the first time, it will run normally. Click the button to load and display an image. What happens if you click it repeatedly?
In IE and Opera, except when the image is loaded for the first time, it displays normally, but then there is no response when you click it again, and the same goes for refreshing. Do they only trigger the "onload" event once? Is it a caching mechanism?
In FF and Chrom, one image is loaded every time you click it.

Modify slightly:

Copy the code

The code is as follows:



After running it, I found that something strange happened. All browsers are consistent and load one image per click. What is the reason for this?
It can be seen that the onload event is not only triggered once during the execution of IE and Opera!

Think about some attributes of the Image object, complete, readyState (IE exclusive value [uninitialized, complete]) (Please change the image name to prevent caching from affecting the effect!)

Copy code

The code is as follows:

After the above test, we can see some differences, for the complete attribute In other words, IE judges based on whether the image is displayed, that is to say, when the loaded image is displayed, the value of the

complete attribute is true. Otherwise, it is always false. It has nothing to do with whether the image has been loaded before, that is, it has nothing to do with whether the image has been loaded before. Caching doesn't matter!
But other browsers behave differently. As long as the image has been loaded before and the browser has cache, complete will be true.
This is consistent with the performance of IE's readyState attribute!
At this point, you can be sure that all browsers cache images! But what exactly causes the above problem?
As we all know, loading things from the cache is very fast, so copy the code in

The code is as follows:

Img.src = isrc;

Img.onload = ...


. Is it possible that IE and Opera are loading so fast that there is no time to append events?

This time load a non-existent image to see the effect:

Copy the code The code is as follows:

It is certain that all browsers do not trigger the onload event. From the perspective of whether the image is cached or loaded, IE and Opera behave normally, complete is always false;
IE's readyState is always uninitialized. What's confusing is FF, where Imgttmt.complete is always true; even more confusing is Chrom, where Imgttmt.complete is false when initially
new Imgttmt() is called. After that, the value of Imgttmt.complete will always be true! If you change to an image that has never been loaded,

FF and Chrom behave the same. When loading initially, the Imgttmt.complete value is false, and then it is true!

During the testing process, we also found that the execution order of the script will indeed affect the addition of events such as onload. If we add events after they are displayed, it will have no practical significance!
Based on the characteristics of interpretive language like javascript, when appending an event, you must pay attention to append the event before the handle that triggers the event.