when you are working on an h5 mobile page, I believe you must have encountered the situation that the page has been opened, but the pictures in it have not been loaded yet. Although this problem does not affect the function of the page, it is not conducive to the user experience. Putting aside the cause of network speed, there are many ways to solve this problem: the most basic is to optimize the performance from the aspects of http request merging, cache management, image compression and so on. In addition, all the pictures used in the page can be preloaded. When the user opens the page, the first screen is not displayed immediately, but the resource loading effect is displayed first, and then the main content of the page is displayed after loading. This will solve that problem. Although this loading effect takes up the user's browsing time, we can make it look good and interesting, so it won't affect the user experience. In this paper, the practice of this idea, to provide a very simple picture preloading component, easy to implement, the function is not weak, when doing mobile pages should have reference value for you.

effect (code download):

459873-20160310234338757-1113600592.gif

1. implementation ideas

html and the background-imag in css will trigger the browser to load the relevant image, but if the image has already been loaded, the browser will directly use the loaded image so that it can be rendered instantly on the page. Create Image objects through javascript, and then set the src property of these objects to the address of the picture to load can also trigger the browser to load pictures, using this to achieve the function of picture preloading: first of all, hide the elements that use the relevant pictures on the page, then use js to load the pictures, and then display the hidden elements when all the pictures are loaded. However, this is only a basic implementation idea. To complete a more robust preloaded component, there are three problems:

1) Progress

because you have to do a preloading effect while preloading, you need to notify the external context of the loading progress in real time. There are two ways to achieve progress, the first is the size of the loaded data / the total data size, the second is the number of files loaded / the total number of files, in the browser, using the first way is unrealistic, there is no native way to do it, so we can only use the second way.

2) failed to load pictures

for example, there are 4 images, 50% of which have been loaded, and there was an error when loading the third one. Should we feedback the progress to 75%? The answer is: yes. If it is not handled in this way, the progress will never reach 100%, and the main content of the page will not be displayed. Although the image has failed to load, it has nothing to do with the loader. Maybe the picture itself does not exist? In other words, the failure to load the picture should not affect the function of the loader.

3) the problem of picture loading timeout

the image cannot be loaded for too long, otherwise the user stays on the loading effect and cannot see the main content, and the user's waiting time is uncontrollably extended, resulting in a decline in the user experience, which is contrary to the original intention of the loader. So you should set a load timeout for each picture. If you haven't finished loading after the timeout of all pictures, you should actively abandon the load, notify the external context to finish loading, and display the main content.

combining the above requirements, the implementation provided in this paper is:

(function () {
    function isArray(obj) {
        return Object.prototype.toString.call(obj) === '[object Array]';
    }

    /**
     * @param imgList ['aa/asd.png','aa/xxx.png']
     * @param callback "/" 
     * @param timeout 5s
     */
    var loader = function (imgList, callback, timeout) {
        timeout = timeout || 5000;
        imgList = isArray(imgList) && imgList || [];
        callback = typeof(callback) === 'function' && callback;

        var total = imgList.length,
            loaded = 0,
            imgages = [],
            _on = function () {
                loaded < total && (PPloaded, callback && callback(loaded / total));
            };

        if (!total) {
            return callback && callback(1);
        }

        for (var i = 0; i < total; iPP) {
            imgages[i] = new Image();
            imgages[i].onload = imgages[i].onerror = _on;
            imgages[i].src = imgList[i];
        }

        /**
         * timeout * totalloaded < total
         * 
         */
        setTimeout(function () {
            loaded < total && (loaded = total, callback && callback(loaded / total));
        }, timeout * total);

    };

    "function" === typeof define && define.cmd ? define(function () {
        return loader
    }) : window.imgLoader = loader;
})();

usage (corresponding to the test.html in the code):

<script src="../js/imgLoader.js"></script>
<script>
    imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){
        console.log(percentage)
    });
</script>

run result:

459873-20160311001246710-16439430.png

2. Demo
the effect given at the beginning of this article. The corresponding page is index.html,. There are two more questions to explain about this effect:

1) it uses the idea that this blog introduced the simple sliding screen function by using the principle of rotation and hammer.js, and packaged some of its logic in swipe.js, to provide a global variable Swipe,. This module has an init method, so that the function related to sliding screen can be initialized externally by calling Swipe.init (). Originally, this init method is not provided. The sliding screen function is initialized after the js is loaded. With this init method, the logic of the sliding screen can be delayed to initialize when the load is complete. Index.html refers to a total of 5 js:

<script src="js/zepto.js"></script>
<script src="js/transition.js"></script>
<script src="js/hammer.js"></script>
<script src="js/imgLoader.js"></script>
<script src="js/swipe.js"></script>

among them, imgLoader.js is the implementation of the image loader introduced earlier, and the first three js are all for the last swipe.js. If you are interested, you can continue my blog to use the rotation principle and hammer.js to achieve a simple slippery screen function to learn about the relevant content. However, the slippery screen is not the focus of this article, and not knowing swipe.js will not affect the understanding of the content of this article.

2) although I used three large images in demo, the loading speed is still very fast in the local environment, so at the beginning, it is difficult to see the effect of preloading. Finally, we can only find a way to delay before each progress callback, so we can see the loading effect at the beginning of the previous gif image. The implementation method is

in the real environment, it is best not to deliberately add this delay. There is no need to waste unnecessary waiting time in order for the user to see a good-looking and interesting loading effect, so the real environment should use the following code:

 
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {
    var percentT = percentage * 100;
    $('-sharploader__info').html('Loading ' + (parseInt(percentT)) + '%');
    $('-sharploader__progress')[0].style.width = percentT + '%';
    if (percentage == 1) {
        $('-sharploader').remove();
        Swipe.init();
    }
});

3. Note
preloading is a common implementation effect, but when using it, there are some problems that need to be paid attention to:

1) when to use

when the page is large, you should consider using it when the page size is larger than 3m. If the page contains images with a large amount of data, you can consider using it when the test on the mobile phone shows that the loading is slow.

2) try to use sprite pictures

3) when loading the effect, try not to use pictures, even if you want to use them, you should use very small pictures, otherwise the loading effect will be stuck there.

4. Summary

this article mainly introduces a simple picture preloader, which can be applied to the development of h5 mobile pages. Under its train of thought, if necessary, it can also be modified to load its other types of resources, such as audio or video files. After all, these types of DOM objects also provide properties and callbacks similar to Image objects. Contrary to the way of preloading, there is also a picture lazy loading technology, now there is a relatively easy to use jquery plug-in on the Internet, but it is still worth understanding its ideas and implementation points, and so I have time to study and write a blog to introduce, please follow!

Welcome to follow my technical official account: terminal R & D Department, communicate and learn together. Id:codeGoogler