Confusions about the differences between img objects in ie and firefox

I encountered some disgusting problems when debugging js, so I made a test program and put it online for you to help me test it. Post see http://vchelp.net/cndevforum/subject_view.asp? Page =-1 & subject_id = 165791

I will explain the test below:

The reason is that I want to make a webpage: After a user uploads an image, if the image is larger than 500 pixels, the image will be reduced to 500 pixels on the client side. However, users do not want to see this resizing process. So I want to hide this image first. After downloading the entire webpage, I want to resize it and then display the adjusted image.

So I first set the style = "display: none" of the img label, and then retrieve and adjust the source image size in window. onload.

The result shows that the width and height of a disolay = none image in firefox are the actual size of the source image, but the width and height of the image in ie are both 0.

Therefore, the safe way is to create an image object, assign values to src, and then read the original image size information:
Var oImg = new Image ();
OImg. src = docunent. getElementById ("c010_jpg"). src;
// Read the width and height of oImg immediately
Alert ([oImg. width, oImg. height]);

The result of the ie test shows that the above Code will output "0, 0"
I suspect that when ie parses an img label of display: none, the image is not downloaded. after src assignment, ie needs to download the image from the target address. Of course, this process is asynchronous.
In firefox, the above Code will output the correct information, which indicates that the image has been downloaded when firefox parses the display: none image. When oImg. src is assigned a value later, it is obtained directly from the cache, so the speed is fast.

With this in mind, I had to use a more complex and Secure Approach:
Var oImg = new Image ();
OImg. onload = function () {alert ([oImg. width, oImg. height]);}
OImg. src = docunent. getElementById ("c010_jpg"). src;
// When src is loaded, the width and height of the output oImg are

There is no way to use events and callback functions. Processing This asynchronous process makes the program structure very ugly.

In addition, the readyState and complete attributes of HTMLImageElement are not found in w3c (http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html,
Firefox implements the complete attribute, While ie implements the complete attribute and readyState attribute.

However, the two attributes are defined differently:
Firefox: After an image is downloaded, the complete attribute is true. If the image is not downloaded, the value is false.
Ie: if an image is not downloaded, The readyState attribute is uninitialized and the complete attribute is false. when the download is complete, the readyState is complete. If the image is not displayed yet, the value of complete is false, and the attribute is true after the display: block.

I did not expect that a simple function would be so difficult to solve the browser compatibility problem, especially because many details are a waste of time, if you want others to solve these problems, consider solving these problems from the server script. This bypasses complex tests on browser compatibility.

In addition, I am still very confused about why in reality, most of the Internet Explorer's onload events are not asynchronous, and only a few of the comrades are asynchronous about this event.