How jQuery implements the preloading image function

Recently I want to use javascript to create an animation function. In order to ensure that the animation can be played smoothly and smoothly, I need to preload the image materials used. Let me share with you the process of implementing this function

Single image preloading

The most common implementation method is as follows

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

First instantiate an Image object Assign the value to img, then set img.src to the image address specified by the parameter url, and then determine the complete attribute of img. If there is a local cache of this image, the value is true. At this time, we can directly operate this image. If If there is no local cache, the value is false. At this time, we need to monitor the onload event of img and put the operation on img in the onload callback function. After testing, this solution is basically compatible with all current browsers

Multiple picture preloading

In many scenarios, single picture preloading cannot meet our needs, because functions like animation usually have a lot of picture materials. Next, we will improve our function based on the original single image preloading

function preloadImg(list) {
    var imgs = arguments[1] || [],    //用于存储预加载好的图片资源
        fn = arguments.cal    lee;
    if(list.length == 0) {
        return imgs;
    }
    var img = new Image();
    img.src = list[0];
    if(img.complete) {
        imgs.push(img);
        list.shift();
        fn(list, imgs);
    }
    else {
        img.onload = function() {
            imgs.push(img);
            list.shift();
            fn(list, imgs);
        };
    }
}
var list = [......],    //此处省略一万个字符
    imgs = preloadImg();

Because frame animation may need to ensure the order of the images used in each frame of animation, so I use recursion in this code method, load the next picture after the previous one is loaded. Each time a picture is loaded, the picture resource is stored in the imgs array, and the address of this picture is removed from the address array list. When When there is no address in the list, jump out of the recursion and return the imgs array

The idea is beautiful, the reality is cruel, this code has two intolerable problems

First of all, I am very likely The last returned imgs array cannot be obtained, because as long as there are pictures that are not cached locally, the storage operation of imgs will be placed in the onload callback event, and event monitoring is also a type of asynchronous operation in JavaScript. After binding the onload event After the callback function, the preloadImg function ends without any return value. The value received by the external imgs variable is undefined. Only when all pictures have local cache, the external imgs variable can successfully obtain all the preloaded images. Loading the array of image resources

After loading one image before loading the next one, the entire process of preloading images will take a relatively long time, the user experience will be reduced, and the original asynchronous operation is specific The feature of fast speed, this implementation method is equivalent to completely abandoning the onload asynchronous feature

Multiple image preloading (improved version)

This time we directly put a An empty array is passed into the function as a parameter, and all images are stored in this array. The following is the improved function code (assuming we can use jQuery)

function preloadImg(list,imgs) {
    var def = $.Deferred(),
        len = list.length;
    $(list).each(function(i,e) {
        var img = new Image();
        img.src = e;
        if(img.complete) {
            imgs[i] = img;
            len--;
            if(len == 0) {
                def.resolve();
            }
        }
        else {
            img.onload = (function(j) {
                return function() {
                    imgs[j] = img
                    len--;
                    if(len == 0) {
                        def.resolve();
                    }
                };
            })(i);
            img.onerror = function() {
                len--;
                console.log('fail to load image');
            };
        }
    });
    return def.promise();
}
var list = [......],    //此处省略一万个字符
    imgs = [];
$.when(preloadImg(list, imgs)).done(
    function() {
        //预加载结束
        //do something here
    }
);

When binding the onload callback function to each img separately The purpose of using a closure is to save the current incrementing variable i. If this is not done, the result will be that the pictures in the list address that are not cached locally will be stored in the last element of imgs

Each time a picture is loaded this time, we do not remove the address of the picture from the list array, so that when we need to use the data of the list array later, we can successfully obtain it

In this code , we introduced jQuery’s Deferred object, which makes it easier for me to grasp the entire process of preloading images

The above is the detailed content of How jQuery implements the preloading image function. For more information, please follow other related articles on the PHP Chinese website!