js implements image preloading (js operates Image object attribute complete, event onload asynchronously loads images)_javascript skills

Take an example:

Copy code The code is as follows:

When the page containing the above code is opened and "tt.jpg" is not loaded, it is only 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.

Slightly modified:

Copy the code The code is as follows:

Found after running , 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 properties 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, IE judges 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 caching! 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 behavior 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 in
...
Img.src = isrc;
Img.onload = ...
... During the process of
, is it possible that IE and Opera are loading so fast that there is no time to append events?

This time load a picture that does not exist at all and 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; what's even more confusing is Chrom, where Imgttmt.complete is false when new Imgttmt() is initially called. After that, the value of Imgttmt.complete will always be true! If you change to an image that has never been loaded, the behavior of FF and Chrom is consistent. 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 an interpretive language like JavaScript, when appending an event, you must pay attention to appending the event before the handle that triggers the event.