Delayed loading of mobile Images

Due to the limited cost-effectiveness of China's telecom networks and the difference in mobile phone processing capabilities, when designing a wireless application,

Saving traffic for users is a very important factor. It can be said that every byte should save the client.

To save traffic, you can pay attention to the following aspects:

I. Using Cache, for example, using local storage in a browser, as discussed earlier

Ii. Delayed LoadingCode(Bottoming detection, getting data through interfaces)

3. Delayed loading of resources. images are displayed in the visible area and then loaded (without considering automatic playback). Audio and Video are loaded by user clicks.

Today, we will briefly describe how to implement delayed loading.

The example is based on jquery and jquery mobile.

Principle: The user slides the screen and the screen is rolled over (suitable for the window scrollstop event provided by jquery) to detect the image that appears in the viewport.

Replace the true src attribute of the image.

Tip: do not check loading immediately after rolling ends. Set a one-second delay. Maybe the user will immediately start the next screen Rolling Based on the current network environment, the latency of 1 second indicates that you really want to view the content. You can try this out with your friends.

Due to clock control, when users frequently and quickly flip the screen, no large number of requests will be sent.

Main Code:

VaR refreshtimer = NULL, mebook = mebook || {}; /** when the screen is frozen after one second, it will detect which images appear in the viewport * different from the PC end. Due to the difference in wireless speed limit and mobile phone computing power, the latency of 1 second is for users on the mobile phone end. tolerable */$ (window ). on ('rollstop', function () {If (refreshtimer) {cleartimeout (refreshtimer); refreshtimer = NULL;} refreshtimer = setTimeout (refreshall, 1e3);}); $. belowthefold = function (element) {var fold = $ (window ). height () + $ (window ). scrolltop (); Return fold <= $ (element ). O Ffset (). top ;};$. abovethetop = function (element) {var Top = $ (window ). scrolltop (); Return top >=$ (element ). offset (). top + $ (element ). height () ;};/** determine whether the element appears in the viewport depends on the last two extension methods */$. inviewport = function (element) {return! $. Belowthefold (element )&&! $. Abovethetop (element)}; mebook. getinviewportlist = function () {var list = $ ('# booklist li'), ret = []; List. each (function (I) {var li = List. eq (I); if ($. inviewport (LI) {mebook. loadimg (LI) ;}}) ;}; mebook. loadimg = function (LI) {If (Li. find ('img [_ SRC] '). length) {var IMG = Li. find ('img [_ SRC] '), src = IMG. ATTR ('_ src'); IMG. ATTR ('src', Src ). load (function () {IMG. removeattr ('_ src ');});}};

Application Instance

QR code scanned by mobile phone: