Yesterday, with the jquery plug-in aeimageresize, found that it has more advantages: each picture after loading, will be immediately to zoom.
This is attributed to the loading event of image object image onload.
View the source of the plug-in, found that it also relies on the image of the object's complete properties and onload events, and particularly IE6 differentiated treatment, in the end IE6 in the picture loading objects, and other browsers what is different?
See below:
Through JS manipulation Dom in many cases is to implement and the current page HTML element asynchronous loading, I talk about the image object some understanding.
Look at an example:
Copy Code code as follows:
<input type= "button" name= "value=" Loading Picture "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 above code is opened, it does not load "tt.jpg" and is loaded when the button is clicked. Triggers the onload event to appear on the page when the load completes. If you are loading "tt.jpg" This picture for the first time, it works fine. Click on the button to load and display a picture, what if repeated clicks?
In IE, opera, in addition to the first time to load the picture display Normal, and then click on the no response, refresh is the same. Do they trigger only one "onload" event? Is the caching mechanism?
In FF and Chrom, load one picture at a time with each click.
Slightly modified:
Copy Code code as follows:
<input type= "button" name= "value=" Loading Picture "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>
After the run found that strange things had happened.
All browsers are consistent, loading a picture at once per click. What's the reason? This can be seen in IE, Opera implementation process is not only a onload incident!
Think of some of the properties of the image object to see, complete, readyState (ie exclusive value [Uninitialized,complete]) (to prevent the effects of caching, please replace the picture Name!) ）
Copy Code code as follows:
<input type= "button" Name= "value=" complete "onclick=" alert ("Complete:" +img.complete + "\nreadystate:" + img.readystate) '/>
<input type= "button" name= "value=" Loading Picture "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 test, you can see some differences, for complete properties, IE is based on whether the picture is displayed to judge, that is, when the loaded picture is displayed, the value of the complete property is true, otherwise has been false, and has not previously loaded the picture does not matter, That has nothing to do with caching! But other browsers are really different, as long as the previous load of the diagram, the browser has a cache, complete is true, this and IE readyState properties of the same performance!
At this point, you can be sure that all browsers will cache the picture! But what is the cause of the above problem?
As we all know, the speed of loading things from the cache is very fast, so in
Copy Code code as follows:
...
IMG.SRC = ISRC;
Img.onload = ...
...
In the process, is IE, Opera loaded faster, too late to append events?
This time load a picture that does not exist to see the effect:
Copy Code code as follows:
<input type= "button" Name= "value=" complete "onclick=" alert ("Complete:" +imgttmt.complete + "\nreadystate:" + imgttmt.readystate) '/>
<input type= "button" name= "value=" Loading Picture "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>
To be sure, all browsers do not trigger the OnLoad event.
From whether the cache or has been loaded from the perspective of the picture, ie, opera normal performance, complete always false; ie readyState always uninitialized.
What is puzzling is FF, where the value of Imgttmt.complete is always true;
More puzzling is chrom, which is the Imgttmt.complete value of false at the time of the initial new imgttmt (). And then the Imgttmt.complete value is always true!
If you change a picture that has never been loaded, the behavior of FF and Chrom is consistent, both at the start of the load, the Imgttmt.complete value is false, and then the true!
The process of testing also found that the execution order of the script does affect similar to the onload, such as the addition of events, if the Append event after it has no practical significance!
Based on the nature of the explanatory language of JavaScript, it is important to pay attention to appending events before the handle that triggers the event.
