Javascript waterfall Stream Image lazy loading instance, javascript waterfall

Javascript waterfall Stream Image lazy loading instance, javascript waterfall

Recently, the project uses "lazy loading", which is generally updated. The library file uses zepto. js because it mainly enables mobile development at ordinary times. Of course, it can also be used with jQuery.

The Code is as follows:

/*** Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * Picture lazy loading **/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 ;};}

I hope this article will help you learn about javascript image lazy loading.

Articles you may be interested in:

• Jquery-based image lazy loading js
• Js-implemented beauty falls stream effect code
• Implementation of javascript adaptive width waterfall stream
• Pure js enables waterfall stream display of photos (automatically adapts to the window size)
• Analysis of waterfall stream layout: Implementation of JS + absolute positioning
• Example of a simple method for js to implement waterfall stream
• Native JS implements responsive waterfall stream Layout
• Javascript-based image lazy loading