Use image preloading components to improve the user experience of HTML5 mobile pages

When working on h5 mobile pages, I believe you must have encountered a situation where the page has been opened, but the Use image preloading components to improve the user experience of HTML5 mobile pagess inside have not been loaded. Although this problem does not affect the function of the page, it is not conducive to the user experience. Regardless of the network speed, there are many ways to solve this problem: the most basic one is to optimize performance from aspects such as http request merging, cache management, Use image preloading components to improve the user experience of HTML5 mobile pages compression, etc.; the other is to pre-process all Use image preloading components to improve the user experience of HTML5 mobile pagess used in the page. In the loading process, when the user opens the page, the first screen is not displayed immediately. Instead, the resource loading effect is displayed first, and then the main content of the page is displayed after the loading is completed. This can solve the problem. Although this loading effect takes up the user's browsing time, we can make it more beautiful and interesting, so it will not affect the user experience. This article implements this idea and provides a very simple Use image preloading components to improve the user experience of HTML5 mobile pages preloading component. It is simple to implement and not weak in function. It should be of reference value to you when making mobile pages.

Effect (img_loader.rar):

1. Implementation ideas

The img tag in html and background-imag in css will trigger the browser to load the related Use image preloading components to improve the user experience of HTML5 mobile pages. However, if the Use image preloading components to improve the user experience of HTML5 mobile pages has already been loaded, the browser will directly use the loaded Use image preloading components to improve the user experience of HTML5 mobile pages, thus It can be rendered on the page instantly. Through javascript, create Image objects, and then set the src attribute of these objects to the address of the Use image preloading components to improve the user experience of HTML5 mobile pages to be loaded, which can also trigger the browser to load the Use image preloading components to improve the user experience of HTML5 mobile pages. You can use this to realize the Use image preloading components to improve the user experience of HTML5 mobile pages preloading function: first use the relevant information on the page. Hide the elements of the Use image preloading components to improve the user experience of HTML5 mobile pages, then use js to load the Use image preloading components to improve the user experience of HTML5 mobile pages, wait until all Use image preloading components to improve the user experience of HTML5 mobile pagess are loaded, and then display the hidden elements. However, this is just a basic implementation idea. To complete a preloading component with more robust functions, there are still three problems:

1) Progress problem

Due to the preloading process, You also need to create a preloading effect, which requires real-time notification of the loading progress to the external context. There are two ways to implement progress. The first is the loaded data size/total data size, and the second is the number of loaded files/total number of files. In the browser, it is unrealistic to use the first method. , there is no native way to do it, so we can only use the second method.

2) The problem of Use image preloading components to improve the user experience of HTML5 mobile pages loading failure

For example, there are 4 pictures and 50% of them have been loaded. An error occurred when loading the third picture. Should the progress be fed back to 75? %Woolen cloth? The answer is: yes. If this is not done, the progress will never reach 100%, and the main content of the page will have no chance to be displayed. Although the Use image preloading components to improve the user experience of HTML5 mobile pages loading may fail, it has nothing to do with the loader. Maybe the Use image preloading components to improve the user experience of HTML5 mobile pages itself does not exist? This means that failure to load Use image preloading components to improve the user experience of HTML5 mobile pagess should not affect the functionality of the loader.

3) Image loading timeout problem

The Use image preloading components to improve the user experience of HTML5 mobile pages cannot be loaded for too long, otherwise the user will stay in the loading effect and cannot see the main content, and the user's waiting time will be extended uncontrollably, causing the user to The experience is degraded, which defeats the original intention of the loader. Therefore, a loading timeout should be set for each Use image preloading components to improve the user experience of HTML5 mobile pages. If the loading has not been completed after the timeout of all Use image preloading components to improve the user experience of HTML5 mobile pagess, the loading should be actively abandoned, the external context should be notified that the loading is complete, and the main content should be displayed.

Based on the above requirements, the implementation provided in this article 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 <p>Usage (corresponding to test.html in the code): </p><p class="cnblogs_code" style="border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; padding-bottom: 5px; padding-top: 5px; padding-left: 5px; border-left: #cccccc 1px solid; padding-right: 5px; background-color: #f5f5f5"><br></p><pre class="brush:php;toolbar:false"><script></script>
<script>
    imgLoader([&#39;../img/page1.jpg&#39;, &#39;../img/page2.jpg&#39;, &#39;../img/page3.jpg&#39;], function(percentage){
        console.log(percentage)
    });</script>

Run results:

2. Demo description

The effect given at the beginning of this article, the corresponding page is index.html, there are more about this effect Two questions need to be explained:

1) It uses the sliding screen idea introduced in the previous blog using the carousel principle and hammer.js to implement a simple sliding screen function, and wraps some of its logic in swipe.js provides a global variable Swipe to the outside world. This module has an init method so that the sliding screen related functions can be initialized externally by calling Swipe.init(). Originally, this init method was not provided. After js is loaded, The sliding screen function will be initialized. With this init method, the sliding screen logic can be delayed until the loading is completed. index.html references a total of 5 js:

<script></script><script></script><script></script><script></script><script></script>

其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的，感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~

2）虽然我在Use Use image preloading components to improve the user experience of HTML5 mobile pages preloading components to improve the user experience of HTML5 mobile pages中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个loading效果，实现方式是：

//模拟加载慢的效果var callbacks = [];
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    var i = callbacks.length;
    callbacks.push(function(){
        setTimeout(function(){            var percentT = percentage * 100;
            $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');
            $('#loader__progress')[0].style.width = percentT + '%';            if (percentage == 1) {
                setTimeout(function(){
                    $('#loader').remove();
                    Swipe.init();
                }, 600);
            }
            callbacks[i + 1] && callbacks[i + 1]();
        },600);
    });    if(percentage == 1) {
        callbacks[0]();
    }
});

在真实环境，最好还是不要刻意去加这种延迟，没必要为了让用户看到一个好看有趣的加载效果，就浪费它不必要的等待时间，所以真实环境还是应该用下面的代码：

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

另外运行Use Use image preloading components to improve the user experience of HTML5 mobile pages preloading components to improve the user experience of HTML5 mobile pages，需要用到grunt启动静态服务，如果已经安装好grunt-cli，则直接运行grunt connect任务即可打开Use Use image preloading components to improve the user experience of HTML5 mobile pages preloading components to improve the user experience of HTML5 mobile pages的index.html。

3. 注意事项

预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：

1）什么时候用

页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。

2）尽量使用sprite图片

3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。

4. 总结

本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究再写博客来介绍，敬请关注！

The above is the detailed content of Use image preloading components to improve the user experience of HTML5 mobile pages. For more information, please follow other related articles on the PHP Chinese website!