Js achieves Image pre-loading (js operates Image object attribute complete, event onload asynchronously loads images)

Let's look at an example:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "loading image" onclick = "addImg('tt.jpg ')"/>
<Script type = "text/javascript">
<! --
Function addImg (isrc)
{
Var Img = new Image ();
Img. src = isrc;
Img. onload = function ()
{
Document. body. appendChild (Img );
}
}
// -->
</Script>

When the page containing the above Code is opened, it does not load tt.jpg ". It is loaded only when you click the button. After loading is complete, the onload event is triggered and displayed on the page. If this is the first time you load the "tt.jpg" image, it will run normally. Click the button to load and display an image. What if I click it again?
In IE and Opera, apart from the normal display when the image is loaded for the first time, it does not respond when you click again, and the refresh is the same. Do they trigger only one "onload" event? Is it a cache mechanism?
In FF and Chrom, this image is loaded every time you click it.

Slightly modify:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "loading image" onclick = "addImg('tt.jpg ')"/>
<Script type = "text/javascript">
<! --
Function addImg (isrc)
{
Var Img = new Image ();
Img. onload = function ()
{
Document. body. appendChild (Img );
}
Img. src = isrc;
}
// -->
</Script>

A strange thing happened after running. All browsers are consistent, and each click loads an image. Why? Therefore, we can see that the execution of IE and Opera does not trigger only one onload event!

Let's look at some attributes of the Image object. complete and readyState (IE exclusive value [uninitialized, complete]). (Please change the Image name to prevent cache impact !)
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "complete" onclick = 'alert ("complete:" + Img. complete + "\ nreadyState:" + Img. readyState) '/>
<Input type = "button" name = "" value = "loading image" onclick = "addImg('mtm.jpg ')"/>
<Script type = "text/javascript">
<! --
Var Img;
Function addImg (isrc)
{
Img = new Image ();
// Img. src = isrc;
Img. onload = function ()
{
Alert ("complete:" + Img. complete + "\ nreadyState:" + Img. readyState)
Document. body. appendChild (Img );
}
Img. src = isrc;
}
// -->
</Script>

After the above tests, we can see some differences. For the complete attribute, IE is determined based on whether the image is displayed, that is, 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 the cache! However, other browsers do not show the same performance. As long as the image has been loaded before and the browser has a cache, the complete is true, which is consistent with the readyState attribute of IE!
So far, it is certain that all browsers will cache images! But what is the cause of the above problem?
As we all know, loading from the cache is fast, so in
...
Img. src = isrc;
Img. onload =...
...
In the process, is it too fast for IE and Opera to load events?

Load a nonexistent image this time to see the effect:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "complete" onclick = 'alert ("complete:" + Imgttmt. complete + "\ nreadyState:" + Imgttmt. readyState) '/>
<Input type = "button" name = "" value = "loading image" onclick = "addImg('mtmttyt.jpg ')"/>
<Script type = "text/javascript">
<! --
Var Imgttmt;
Function addImg (isrc)
{
Imgttmt = new Image ();
Imgttmt. src = isrc;
Alert ("complete:" + Imgttmt. complete + "\ nreadyState:" + Imgttmt. readyState)
Imgttmt. onload = function ()
{
Alert ("impossible ")
}
}
// -->
</Script>

It is certain that all browsers do not trigger the onload event. From the perspective of cache or image loading, IE and Opera are normal, complete is always false, and readyState of IE is always uninitialized. It is confusing that FF, where the value of Imgttmt. complete has always been true; more confusing is Chrom, which sets the value of Imgttmt. complete to false at the first new Imgttmt. The value of Imgttmt. complete is always true! If you change an image that has never been loaded, the FF and Chrom actions are the same. The Imgttmt. complete value is false at the beginning of loading, and then true!
During the test, we also found that the execution sequence of the script does affect the append of events such as onload. If it is displayed, the append event has no practical significance! Based on the characteristics of javascript, when appending an event, you must note that the event is appended before the handle that triggers the event.