JavaScript and Image loading event (onload), loading status (complete)_javascript skills

Yesterday I used the jQuery plug-in aeImageResize and found that it has more advantages: after each image is loaded, it will be scaled immediately.
This is due to the onload event of the image object Image.
Looking at the source code of the plug-in, I found that it also relies on the complete attribute and onload event of the image object, and specifically treats IE6 differently. What is the difference between IE6 and other browsers in the image loading object?

See below:

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:

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:

After running, I found something strange Something 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!)

After the above tests, 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, and 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 copy the code in

In the process, could IE , Opera is loading so fast that it’s too late to append events?
This time load a picture that does not exist at all to see the effect:

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 is confusing is FF, where the value of Imgttmt.complete is always true;
What is 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, the behavior of FF and Chrom will be the same. When loading at the beginning, 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.