Native javascript code example for implementing waterfall streaming on the Mobile End _ javascript tips-js tutorial

This article mainly shares examples of code for implementing waterfall streaming on mobile terminals using native js, if you are interested in waterfall stream layout, you can refer to the waterfall stream layout, which has become a very common way to present images on mobile devices such as PCs and mobile phones. Recently, I used "lazy loading", which is usually updated, because I usually use zepto. js for library files because of mobile development. Of course, it can also be used with jQuery.
The Code is as follows:

Function loadImgLazy (node) {var lazyNode = $ ('[node-type = imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject, imgDataSrc, localUrl; localUrl = location. href; // get the mobileHeight of the visible area of the current browser =$ (window ). height (); return function (co) {var conf = {'loadfirst ': true, 'loadimg': true}; for (var item in conf) {if (item in co) {conf. item = co. item ;}} var that ={}; var _ this = {}; /*** [replaceImgSrc dynamically replaces src] * @ param {[type]} tempObject [description] * @ return {[type]} [description] */_ this. replaceImgSrc = function (tempObject) {var srcValue; $. each (tempObject, function (I, item) {imgObject = $ (item ). find ('img [data-lazysrc] '); imgObject. each (function (I) {imgDataSrc = $ (this ). attr ('data-lazysrc'); srcValue = $ (this ). attr ('src'); if (srcValue = '#') {if (imgDataSrc) {$ (this ). attr ('src', imgDataSrc); $ (this ). removeAttr ('data-lazysrc') ;}}}) ;};/*** check whether the imglazy node is displayed on the screen on the first screen, if yes, load the image * @ param {[type]} I) {currentNodeTop [description] * @ return {[type]} [description] */_ this. loadFirstScreen = function () {if (conf. loadfirst) {lazyNode. each (function (I) {currentNodeTop = $ (this ). offset (). top; if (currentNodeTop <mobileHeight + 800) {_ this. replaceImgSrc ($ (this) ;}}}; // after loading the first screen, load the image _ this according to the queue. loadImg = function () {if (conf. loadimg) {$ (window ). on ('scroll', function () {var imgLazyList = $ ('[node-type = imglazy]', node); for (var I = 0; I <5; I ++) {_ this. replaceImgSrc (imgLazyList. eq (I) ;}};};that = {replaceImgSrc: _ this. replaceImgSrc (), mobileHeight: mobileHeight, objIsEmpty: function (obj) {for (var item in obj) {return false;} return true;}, destory: function () {if (_ this) {$. each (_ this, function (I, item) {if (item & item. destory) {item. destory () ;}}); _ this = null ;}$ (window ). off ('scroll ') ;}}; return that ;};}

The above is all the content shared in this article. I hope it will be helpful for you to use javascript skillfully.