“瀑布流式”圖片懶加載JS代碼示例

/**


Created by zhiqiang on 2015/10/14.
hpuhouzhiqiang@gmail.com
圖片的懶加載
**/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),

 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;


localUrl = location.href;
 // 獲取當前瀏覽器可視區域的高度
 mobileHeight = $(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 動態替換節點中的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');
                 }
             }
         });
     });
 };

 /**
  * 首屏判斷屏幕上是否出現imglazy節點，有的話就加載圖片
  * @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));
             }
         });
     }
 };

 //當加載過首屏以后按照隊列加載圖片
 _this.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;

};
}</pre>