Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to use the picture preloading component to improve the user experience of html5 mobile pages. Many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

In doing the H6 mobile page, I believe you must have encountered the situation that the page has been opened, but the picture inside has not been loaded out. Although this problem does not affect the function of the page, it is not conducive to the user experience. Putting aside the reasons for 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.

Effect:

1. Realization idea

The img tag in 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 instantly rendered on the page. Through javascript, create Image objects, 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 wait until all the pictures are loaded and then display the hidden elements. However, this is only a basic implementation idea, to complete a more robust preloaded component, there are three problems:

1) schedule problem

Because you have to do a preload effect while preloading, you need to inform 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) the problem of image loading failure

For example, there are 4 images, 50% of which have already been loaded, and there was a mistake 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 image loading timeout

The picture 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. Therefore, 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:

JavaScript Code copies content to the clipboard

(function () {function isArray (obj) {return Object.prototype.toString.call (obj) = ='[object Array]' } / * * @ param imgList list of addresses of images to be loaded. The callback of ['aa/asd.png','aa/xxx.png'] * @ param callback after each successful loading of a picture, and passing "Total number of pictures loaded / total number of pictures to be loaded" indicates the progress * @ param timeout timeout of each image load Default is 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 && (++loaded, callback && callback(loaded / total)); }; if (!total) { return callback && callback(1); } for (var i = 0; i < total; i++) { imgages[i] = new Image(); imgages[i].onload = imgages[i].onerror = _on; imgages[i].src = imgList[i]; } /** * 如果timeout * total时间范围内，仍有图片未加载出来（判断条件是loaded < 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; })(); 使用方式（对应代码中的test.html）： XML/HTML Code复制内容到剪贴板 imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){ console.log(percentage) }); 运行结果：

2. Demo description

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 sliding screen idea introduced in the previous blog Hammer.js+ broadcast principle to achieve a concise sliding screen function, and packages some of its logic in swipe.js, providing a global variable Swipe, this module has an init method, so that the external can initialize the sliding screen related function by calling Swipe.init (). Originally, this init method is not provided, and the sliding screen function will be initialized when the js is loaded. With this init method, you can delay the logic of the slide screen to initialize it when the load is complete. Index.html refers to a total of 5 js:

XML/HTML Code copies content to the clipboard

Among them, imgLoader.js is the implementation of the picture 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 principle of rotation combined with hammer.js to achieve a simple sliding screen function to learn about the relevant content. However, slippery screen is not the focus of this article, not understanding 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 very difficult to see the effect of preloading. In the end, we can only find a way to delay before each progress callback, so that we can see the loading effect at the beginning of the previous gif image, which is implemented by:

XML/HTML Code copies content to the clipboard

/ / simulate the slow loading effect 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] ();}; if (percentage = 1) {callbacks [0] () })

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 following code should be used in the real environment:

XML/HTML Code copies content to the clipboard

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 () ()

3. Matters needing attention

Preloading is a common implementation effect, but there are some problems to pay attention to when using it:

1) when to use it

When the page is large, you should consider using it when the page size is more than 3m; the page contains images with a large amount of data. When the test on the mobile phone can obviously see the slow loading, you can consider using it.

2) use sprite images as much as possible

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

4. Summary

This paper mainly introduces a simple picture preloader, which can be applied to the development of h6 mobile pages. under its idea, if necessary, it can also be modified to load other types of resources, such as audio or video files. after all, these types of DOM objects also provide properties similar to Image objects.

After reading the above, do you have any further understanding of how to use the image preloading component to improve the user experience of html5 mobile pages? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.