Js image pre-loading example

Simple Example of js image pre-loading
Copy codeThe Code is 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

JavaScript code is used to manipulate DOM. In many cases, it is used to asynchronously load html elements on the current page. I will talk about some of the Image objects.
Let's look at an example:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "loading image" 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 ". It is loaded only when you click the button. After loading is complete, the onload event is triggered and displayed on the page.
If this is the first time you load the "tt.jpg" image, it will run normally. Click the button to load and display an image. What if I click it again?
In IE and Opera, apart from the normal display when the image is loaded for the first time, it does not respond when you click again, and the refresh is the same. Do they trigger only one "onload" event? Is it a cache mechanism?
In FF and Chrom, this image is loaded every time you click it.

Slightly modify:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "loading image" 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>

A strange thing happened after running. All browsers are consistent, and each click loads an image. Why?
Therefore, we can see that the execution of IE and Opera does not trigger only one onload event!

Let's look at some attributes of the Image object. complete and readyState (IE exclusive value [uninitialized, complete]). (Please change the Image name to prevent cache impact !)
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "complete" onclick = 'alert ("complete:" + Img. complete + "\ nreadyState:" + Img. readyState) '/>
<Input type = "button" name = "" value = "loading image" 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 tests, we can see some differences. For the complete attribute, IE is determined based on whether the image is displayed, that is, when the loaded image is displayed,
The value of the complete attribute is true. Otherwise, it is always false. It has nothing to do with whether the image has been loaded before, that is, it has nothing to do with the cache!
However, other browsers do not show the same performance. As long as the image has been loaded before and the browser has a cache, the complete value is true,
This is consistent with the readyState attribute of IE!
So far, it is certain that all browsers will cache images! But what is the cause of the above problem?
As we all know, loading from the cache is fast, so in
Copy codeThe Code is as follows:
Img. src = isrc;
Img. onload =...

In the process, is it too fast for IE and Opera to load events?

Load a nonexistent image this time to see the effect:
Copy codeThe Code is as follows:
<Input type = "button" name = "" value = "complete" onclick = 'alert ("complete:" + Imgttmt. complete + "\ nreadyState:" + Imgttmt. readyState) '/>
<Input type = "button" name = "" value = "loading image" 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>

It is certain that all browsers do not trigger the onload event. From the perspective of cache or image loading, IE and Opera are normal, and complete is always false;
The readyState of IE is always uninitialized. It is confusing that FF, where the value of Imgttmt. complete has always been true; more confusing is Chrom, which was initially
When new Imgttmt () is used, the value of Imgttmt. complete is false. The value of Imgttmt. complete is always true! If you change an image that has never been loaded,
FF and Chrom have the same behavior. The value of Imgttmt. complete is false at the first loading, and then true!

During the test, we also found that the execution sequence of the script does affect the append of events such as onload. If it is displayed, the append event has no practical significance!
Based on the characteristics of javascript, when appending an event, you must note that the event is appended before the handle that triggers the event.