javascript瀑布流式圖片懶載入執行個體_javascript技巧

最近項目使用到了“懶載入”，現在更新一般，因為平時主要使移動端的開發所以庫檔案使用的是zepto.js 。當然也可以和jQuery 通用。

代碼如下：

/** * 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; };}

希望本文對大家學習javascript圖片懶載入有所協助。