Enhance the user experience of h5 mobile pages by using simple image pre-loading components,

Enhance the user experience of h5 mobile pages by using simple image pre-loading components,

I believe that the page has already been opened but the images in it have not been loaded. This problem does not affect the page function, but is not conducive to the user experience. Aside from the causes of network speed, there are many ways to solve this problem: the most basic thing is to optimize the performance of http request merging, Cache Management, and image compression; in addition, you can pre-load all the images used in the page. When you open the page, the first screen is not displayed immediately, but the resource loading effect is displayed first, then display the main content of the page to solve the problem. Although this loading effect takes the user's browsing time, we can make it interesting, so it will not affect the user experience. This article has put this idea into practice and provides a very concise picture pre-loading component, which is simple to implement and has no weak functionality. It should be of reference value to you when you are doing mobile pages.

Effect (Code download ):

(Function () {function isArray (obj) {return Object. prototype. toString. call (obj) = '[object Array]';}/*** @ param imgList list of image addresses to be loaded, ['aa/asd.png ', 'AA/xxx.png '] * @ param callback the callback after each image is successfully loaded, input "Total number of Loaded Images/total number of images to be loaded" to indicate the progress * @ param timeout. The timeout value for loading each image, the default value is 5 s */var loader = function (imgList, callback, timeout) {timeout = timeout | 5000; imgList = isArray (imgList) & imgList | []; callback = t Ypeof (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];}/*** if an image is still not loaded out of the timeout * total time range (the condition is loaded <total ), notice that all images in the external environment have been loaded * to prevent the user from waiting too long */setTimeout (function () {loaded <total & (loaded = total, callback & callback (loaded/total) ;}, timeout * total) ;}; "fun Ction "=== typeof define & define. cmd? Define (function () {return loader}): window. imgLoader = loader ;})();

Use the formula (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>

Running result:

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

Here, imgLoader. js is the implementation of the previously introduced image loader. The first three js are the last swipe. js service. If you are interested, you can continue to use the carousel principle in combination with hammer. js implements simple Sliding Screen functions to learn more. However, sliding screens are not the focus of this Article. Failing to understand swipe. js will not affect understanding the content of this article ~

2) Although I used three large images in the demo, the loading speed was very fast in the local environment, so at the beginning, it is difficult to see the effect of the pre-loading. In the end, you can only find a way to perform a delay before each progress callback, so that you can see the loading effect from the beginning of the GIF image. The implementation method is as follows:

// Simulate slow 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; values ('{loader=info'{.html ('loading' + (parseInt (percentT) + '% '); $ ('# loader _ SS') [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] () ;}});

In the real environment, it is best not to deliberately add such a delay. There is no need to waste unnecessary waiting time to let users see a nice and interesting loading effect, therefore, the following code should be used in the real environment:

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. Notes

Pre-loading is a common implementation effect, but when using it, you need to pay attention to the following issues:

1) when to use

When the page size is large, generally the page size exceeds 3 m should be considered for use; the page contains pictures with a large amount of data, the mobile phone side test can obviously see when loading is slow, you can consider using it.

2) use sprite images whenever possible

3) when loading effects, try not to use images. Even if you want to use a small image, otherwise loading effects will be meaningless.

4. Summary

This article mainly introduces a simple image preloader that can be used in the development of h5 mobile pages. Under its ideas, if necessary, it can also be transformed, it is used to load other types of resources, such as audio or video files. After all, these types of DOM objects also provide attributes and callbacks similar to Image objects. In contrast to the pre-loading method, there is also a lazy image loading technology, and now there is a relatively useful jquery plug-in on the internet, however, it is worthwhile to have a deep understanding of its ideas and Implementation points. Wait for me to study and write a blog to introduce it. Stay tuned!

Download this document on behalf