JS picture preload Simple Example
Copy Code code as follows:
function LoadImage (URL, callback) {
if (url!= ' null ') {
var img = new Image ();
img.src = URL;
if (img.complete) {
Callback (IMG);
} else {
Img.onload = function () {
Img.onload = null;
Callback (IMG);
}
}
}
}
LoadImage (Pic_url,loadimage);
Another detailed example
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 of the different points, for complete properties, IE is based on whether the picture is displayed to judge, that is, when the loaded picture displayed,
The value of the complete property is true, otherwise it is false, and it has nothing to do with the previous picture being loaded, that is, the cache is not related!
But other browsers are really different, as long as you have previously loaded the graph, the browser has a cache, complete is true,
This is consistent with the performance of IE's readyState properties!
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 loaded the picture of the angle, IE, opera normal performance, complete always false;
The readyState of IE is always uninitialized. It is doubtful that FF, where the value of Imgttmt.complete is always true; more puzzling is the chrom, which is in the initial
The Imgttmt.complete value is false when 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.
