Confusion about the difference between img objects in IE and Firefox_Basic knowledge

I encountered some disgusting problems when debugging js, so I made a test program and put it online for everyone to help me test it. See the posthttp://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

I will give an explanation about the test below:

The reason is that I want to make such a web page: after the user uploads a picture, if the picture is larger than 500 pixels, the picture will be displayed on the client Shrink to 500 pixels size. But I don't want users to see this resizing process. So I want to hide the image first, resize it after the entire web page is downloaded, and then display the adjusted image.

So I first set the style="display:none" of the img tag, and then obtained the original image size in window.onload and adjusted it.


It turns out that under firefox, an image width of disolay=none and height are the actual sizes of the original image, but under IE they are both 0

, so I thought of a safe way to create an image object, then assign a value to src, and then read the original image size information:
var oImg = new Image();
oImg.src = docuent.getElementById("c010_jpg").src;
//Read the width and height of oImg immediately
alert([oImg.width, oImg .height]);

The result was found in the IE test that the above code will output "0,0"
I suspect this means that when IE parses a display:none img tag, it does not download this Picture, so after the above code assigns a value to oImg.src, IE needs to download the picture from the target address. Of course, this process is an asynchronous process
and under firefox, the above code will output the correct information, which shows that firefox parses When display:none is used for a picture, the picture has already been downloaded. When assigning a value to oImg.src in the future, it will be obtained directly from the cache, so it is fast

Thinking of this, I had to use a more complicated and safer method:
var oImg = new Image();
oImg.onload = function (){alert([oImg.width, oImg.height]);}
oImg.src = docuent.getElementById("c010_jpg").src;
//When src is After loading, there is no way to output the width and height of oImg

using events and callback functions. Handling this asynchronous process makes the program structure look ugly.

In addition, the readyState and complete attributes of HTMLImageElement were not found in w3c (http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html).
I found that firefox implements the complete attribute, while IE implements the complete attribute and the readyState attribute

But the two definitions of the attributes seem to be different:
firefox: An image has been downloaded, complete The attribute is true, if the download is not completed, it is false
ie: If an image has not been downloaded, the readyState attribute is uninitialized, and the complete attribute is false. When the download is completed, readyState is complete, and if the image is not displayed at this time , complete is false, and this attribute becomes true after display (display:block)

I didn’t expect that a simple function would be so laborious. The browser compatibility problem is difficult to solve smoothly, especially many details are very wasteful. Time, I hope others will consider solving these problems from server-side scripts when they encounter these problems. This bypasses complex testing for browser compatibility.


In addition, I am also very confused as to why most IEs in reality are not asynchronous for the onload event, and only a few gay IEs are asynchronous for this event.