JavaScript and Image loading events (onload), loading status (complete)

Yesterday, we used the jQuery plug-in aeImageResize to find it more advantageous: after each image is loaded, it will immediately perform proportional scaling.
This is attributed to the onload of the Image object loading event.
Check the source code of the plug-in and find that it also depends on the complete attribute of the image object and the onload event, and especially treats IE6 differently. In the end, IE6 is on the image loading object, what is the difference with other browsers?

See the following:

JavaScript code is used to manipulate DOM. In many cases, it is used to asynchronously load html elements on the current page. I will talk about some of the Image objects.
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 preceding code is opened, it is not loaded into 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
Copy codeThe Code is as follows:
...
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 is always true;
Even more confusing is the Chrom, which is when Imgttmt. complete is set to false in the initial 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.