Mobile-H5 pre-load page

Read Catalogue

• 1. Realization of Ideas
• 2. Demo Instructions
• 3. Precautions
• 4. Summary

In doing H5 mobile page, I believe you must have encountered the page has been opened, but the picture has not been loaded out of the situation, although this problem does not affect the function of the page, but not conducive to user experience. Aside from the reasons for the speed, to solve this problem has many aspects of the idea: the most basic, to be from the HTTP request merge, cache management, image compression and other aspects of performance optimization; In addition, you can use all the images in the page to do pre-loading processing, when the user opens the page does not immediately display the first screen, Instead, display the resource load effect, wait until the load is complete, and then display the main content of the page, which will solve the problem. While this loading effect takes up the user's browsing time, we can make it look interesting and not affect the user experience. This article has practiced this idea, provides a very concise picture preloaded component, the realization is simple, the function is not weak, should have the reference value to you when makes the mobile page.

Effects (code download):

1. Realization of Ideas

HTML inside the IMG tag and CSS in the BACKGROUND-IMAG will trigger the browser to load related images, but if the image has been loaded, the browser will directly use the loaded image, so that can be instantly rendered in the page. Using JavaScript to create an image object and then set the SRC attribute of these objects to the image address to be loaded will also trigger the browser to load the image, which can be used to achieve the image preload function: In the page first to the relevant pictures of the elements to hide, Then use JS to load the picture, wait until all the pictures loaded and then the hidden elements displayed. However, this is only a basic implementation of the idea, to complete a more robust pre-loading components, there are the following three questions:

1) Progress issues

Due to preload, a preload effect is required, which requires real-time notification of the progress of the load to the external context. About the progress of two implementations, the first is the size of the loaded data/total data size, the second is the number of files loaded/total number of files, in the browser, the first way is unrealistic, there is no native way can be done, so can only use the second type.

2) Image Load Failure problem

For example, there are 4 pictures, already loaded 50%, when loading the third one error, should not be the progress of feedback to 75%? The answer is: should. If not, the progress will never be 100%, the main content of the page will not be shown, although the picture loading has failed, but with the loader does not matter, perhaps the picture itself does not exist? This means that the image loading failure should not affect the loader's functionality.

3) Picture loading time-out problem

Pictures can not be loaded too long, otherwise the user has been stuck in the loading effect on the main content, the user's waiting time is not controlled to prolong, resulting in a decline in user experience, so it is contrary to the original intention of the loader. Therefore, each picture should be set to a load time-out, if after the time-out of all the pictures, not loaded, you should actively discard the load, notify the external context loaded, display the main content.

In combination with these requirements, the implementation provided in this article is:

(function () {function IsArray (obj) {return Object.prototype.toString.call (obj) = = = ' [Object Array] '; }/** * @param imglist to load the picture address list, [' Aa/asd.png ', ' aa/xxx.png '] * @param callback callback after each successful load of a picture, and pass in "total number of pictures loaded/To be loaded The total number of pictures "represents progress * @param timeout for each picture loaded, default is 5s */var loader = function (imglist, callback, timeout) {Ti Meout = 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 = ImglisS[n];         }/** * If there is still a picture not loaded in Timeout * Total time range (judging by loaded < full), notify the external environment that all pictures are loaded * purpose is to avoid user waiting time too long */SetTimeout (function () {Loaded < total && (loaded = Total, callback && CALLB        ACK (loaded/total));    }, timeout * total);    }; "function" = = = typeof define && define.cmd? Define (function () {return loader}): Window.imgloader = loader;}) ();

How to use (test.html in the corresponding code):

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

Operation Result:

2. Demo Instructions

This article begins with the effect, the corresponding page is index.html, there are two questions about this effect need to be explained:

1) It used this blog using the Carousel principle combined with hammer.js to achieve a concise slide-screen function introduced by the slide-screen idea, and some of its logic wrapped in the swipe.js, provides a global variable swipe, this module has an Init method, so that the external through the call Swipe.init () can initialize the sliding screen related functions, originally did not provide this init method, in the JS loading will initialize the sliding screen function, with this init method can be the sliding screen logic delay to the time of loading to initialize. Index.html altogether quoted 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>

Which Imgloader.js is the previous introduction of the picture loader implementation, the first three JS are for the last Swipe.js service, interested can continue my blog using the principle of rotation with hammer.js to achieve a concise sliding screen function to understand the relevant content. However, the slide screen is not the focus of this article, do not understand swipe.js will not affect the content of this article ~

2) Although I used 3 larger pictures in the demo, but because in the local environment, loading speed is very fast, so at the beginning, it is difficult to see the effect of preloading, and finally can only find a way to do a delay before each progress callback, This is how you can see the loading effect from the beginning of the previous GIF picture, which is achieved by:

Press CTRL + C to copy the code<textarea></textarea>Press CTRL + C to copy the code

In the real environment, it is best not to deliberately add this delay, there is no need to let the user see a good looking interesting loading effect, waste it unnecessary waiting time, so the real environment should still use the following code:

Imgloader ([' img/page1.jpg ', ' img/page2.jpg ', ' img/page3.jpg '], function (percentage) {    var percentt = percentage * ;    $ (' #loader__info '). html (' Loading ' + (parseint (Percentt)) + '% ');    $ (' #loader__progress ') [0].style.width = Percentt + '% ';    if (percentage = = 1) {        $ (' #loader '). Remove ();        Swipe.init ();    }});

3. Precautions

Preloading is a relatively common implementation, but when used, there are some issues to be aware of:

1) When to use

When the page is large, the general page size of more than 3M should be considered, the page contains a large amount of data in the picture, in the mobile-side test can obviously see the slow loading, you can consider using.

2) Use Sprite images as much as possible

3) Loading effect implementation, as far as possible without pictures, even if you should use a very small picture, otherwise loading effect card there is no meaning.

4. Summary

This article mainly introduces a simple picture preloader, which can be applied to the development of H5 mobile page, under its train of thought, if necessary, it can also be modified to use it to load other types of resources, such as audio or video files, After all, these types of Dom objects also have properties and callbacks that provide similar image objects. and preload in the opposite way, there is a picture lazy loading technology, now online has a better use of jquery plug-ins, but still very valuable to understand the idea and implementation of the key points, and so I have time to study and write blog to introduce, please pay attention!

Mobile-H5 pre-load page