Simple example of preloading js image
function loadImage(url, callback) {
if(url!='null') {
var img = new Image();
= url;
if() {
callback(img);
} else {
= function(){
= null;
callback(img);
}
}
}
}
loadImage(pic_url,loadImage);
Another detailed example
In many cases, manipulating DOM through js is to implement asynchronous loading of html elements on the current page. Let me talk about some understanding of Image objects.
See an example:
<input type="button" name="" value="Load picture" onclick="addImg('')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
= isrc;
= function ()
{
(Img);
}
}
//-->
</script>
"" is not loaded when the page containing the above code is opened, and it is loaded only when the button is clicked. When the load is completed, the onload event is triggered to be displayed on the page.
If you load the "" image for the first time, it will run normally. Click the button to load and display an image. What happens if you click it repeatedly?
In IE and Opera, except that the picture is displayed normally when it is loaded for the first time, and then clicked again and there is no response, and the same is true for refreshing. Do they only trigger the "onload" event once? Is it a caching mechanism?
In FF and Chrom, one image is loaded once every click.
Slightly modified:
<input type="button" name="" value="Load picture" onclick="addImg('')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
= function ()
{
(Img);
}
= isrc;
}
//-->
</script>
After running, I found that something strange happened. All browsers are consistent, and one image is loaded every click. What is the reason for this?
From this we can see that the onload event is not triggered only once during the execution of IE and Opera!
Think about some properties of the Image object, complete, readyState (IE exclusive value [uninitialized, complete]) (To prevent the cache from affecting the effect, please change the image name!)
<input type="button" name="" value="complete" onclick='alert("complete : "+ +"\nreadyState : "+)' />
<input type="button" name="" value="Load picture" onclick="addImg('')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
// = isrc;
= function ()
{
alert("complete : "+ +"\nreadyState : "+)
(Img);
}
= isrc;
}
//-->
</script>
After the above test, some differences can be seen. For the complete attribute, IE judges 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 will always be false, which has nothing to do with whether the image has been loaded before, that is, it has nothing to do with cache!
However, other browsers show differently. As long as the image has been loaded before and the browser has cache, complete will be true.
This is consistent with the performance of IE's readyState property!
At this point, it is certain that all browsers will cache images! But what exactly causes the above problem?
As we all know, loading things from the cache is very fast, then
= isrc;
= ...
During the process, is it that IE and Opera loading speed fast enough to add events?
This time, load a picture that does not exist at all to see the effect:
<input type="button" name="" value="complete" onclick='alert("complete : "+ +"\nreadyState : "+)' />
<input type="button" name="" value="Load picture" onclick="addImg('')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
= isrc;
alert("complete : "+ +"\nreadyState : "+)
= function ()
{
alert("impossible")
}
}
//-->
</script>
It is certain that all browsers do not trigger the onload event. From the perspective of whether the image has been cached or has been loaded, IE and Opera perform normally, and complete is always false;
IE's readyState is always uninitialized. What is confusing is FF, where the value of 'has always been true ; what is even more confusing is Chrom, which was initially
When new Imgttmt(), the value is false. And then the value has always been true! If you change a picture that has never been loaded,
The behavior of FF and Chrom is consistent. Both are false when loading at the beginning, and then true!
During the testing process, it was also found that the execution order of the script does affect the appendment of events similar to onload, and if the event is added after it is displayed, it will have no practical significance!
Based on the characteristics of interpreted language such as javascript, when appending events, you must pay attention to appending events before the handle that triggers the event.