Js image preload example

  • 2020-03-30 02:46:50
  • OfStack

Simple example of js image preloading


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

In many cases, js manipulation of the DOM is used to implement asynchronous loading of the HTML elements on the current page. I want to talk about some knowledge of the Image object.
Here's an example:


<input type="button" name="" value=" Load the 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>

"Tt.jpg" is not loaded when the page containing the above code opens, but when the button is clicked. When the load completes, the onload event is triggered and displayed on the page.
If this is the first time you load "tt.jpg", it works fine. Click the button to load and display a picture. What happens if you click again?
In IE and Opera, except that the first time the image is loaded, it will be displayed normally, and then there will be no response when it is clicked again, so will the refresh. Do they only trigger the "onload" event once? Is it a caching mechanism?
FF, Chrom, each click to load a picture.

Modify it slightly:


<input type="button" name="" value=" Load the 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 running, strange things happened. All browsers are consistent, with one image per click. What's the reason?
Thus, you can see that the onload event is not triggered only once during the execution of IE and Opera!

Think of some attributes of the Image object to see,complete, readyState(IE exclusive [uninitialized,complete]) (to prevent the cache effect please change the Image name!)


<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"nreadyState : "+Img.readyState)' />
<input type="button" name="" value=" Load the 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, we can see some differences. For the complete attribute, IE is determined by whether the image is displayed or not. That is to say, 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 or not.
However, other browsers do behave differently. If the graph has been loaded before and the browser has a cache, complete is true,
This is consistent with the performance of IE's readyState property!
At this point, it's safe to say that all browsers cache images! But what causes the above problems?
We all know that loading things from the cache is fast

Img.src = isrc;
Img.onload = ...

In the process, is the speed of loading IE and Opera too fast to append events?


This time load a picture that doesn't exist and see what it looks like:


<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value=" Load the 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, none of the browsers triggers the onload event. From the point of view of whether the images have been cached or loaded, the performance of IE and Opera is normal, complete is always false;
IE's readyState is always uninitialized. Confusively, FF, where the value of Imgttmt.complete is always true; Even more confusing is Chrom, which is in the beginning
The plete value of Imgttmt.com is false when new Imgttmt(). And then the plete value for Imgttmt.com is always true! If I take a picture that has never been loaded before,
FF and Chrom behave the same way, with a plete of false on Imgttmt.com and then true!

During the test, it was also found that the execution order of the script does affect the append of events such as onload, and there is no practical significance in appending events after they are displayed!
Because of the nature of an interpreted language like javascript, it is important to append an event before the handle that triggers it.


Related articles: