The puzzle of the difference of IMG object in IE and Firefox-basic knowledge

In debugging JS encountered some disgusting problems, so I did a test program, put online let everyone help me test. Post See http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

Let me give you an explanation of the test:

Cause I want to do such a Web page: Users upload a picture, if the picture is greater than 500 pixels, then in the client to reduce the picture to 500 pixel size. But do not want to let the user see this sizing process. So I want to first hide the picture, after the entire page is downloaded, resize, and then display the adjusted image.

So I first set the IMG tag's style= "Display:none", and then get the original size in window.onload to adjust.


It turns out that under Firefox, a disolay=none image width and height is the actual size of the original, but IE is 0

So the idea is to build an image object and then assign a value to src to read the original size information:
var oimg = new Image ();
OIMG.SRC = Docunent.getelementbyid ("c010_jpg"). Src;
Read Oimg's width and height immediately.
alert ([Oimg.width, Oimg.height]);

Results in IE test found that the above code will output "0,0"
I suspect that this means that when IE resolves a display:none img tag, it does not download the image, so the above code assigns the OIMG.SRC to the Internet Explorer to download the image from the target address, of course, the process is asynchronous
In Firefox, the code above will output the correct information, which means that Firefox has already downloaded this image when parsing Display:none's pictures. When you assign a value to OIMG.SRC, you get it directly from the cache, so it's fast

I had to think about it in a more complicated and safer way:
var oimg = new Image ();
Oimg.onload = function () {alert ([Oimg.width, Oimg.height]);}
OIMG.SRC = Docunent.getelementbyid ("c010_jpg"). Src;
When SRC is loaded, the output oimg and the width and height

There is no way to use events and callback functions. Processing this asynchronous process makes the program structure difficult to read.

In addition, the readystate and complete properties of htmlimageelement are not found in the http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html.
It is found that Firefox implements the complete property, and IE implements the complete and readystate properties.

But the definitions of the attributes seem different:
Firefox: An image is downloaded, the complete property is true, and no download is completed false
ie: an image has not been downloaded, the ReadyState property is Uninitialized,complete property is false. When the load is complete, the readystate is complete, and if the picture is not shown at this time, Complete to false to show that this property will become true after (Display:block)

Did not expect a simple function unexpectedly so laborious, the browser compatibility problem is difficult to solve smoothly, especially many details are very waste of time, hope that others encounter these problems or more consider from the server-side script to solve these problems. This bypasses the complex test of browser compatibility.


In addition I am also very puzzled, why the reality of IE for the OnLoad event, most is not asynchronous, only a few comrades of IE for this event is asynchronous.