javascript瀑布流式图片懒加载实例解析与优化

2019-11-20 10:31:48

字体：大中小

来源：转载

供稿：网友

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《javascript瀑布流式图片懒加载实例》再来看看图片“懒加载”的一些知识。

图片“懒加载”的主旨：
按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。

先来看一段代码：

 var conf = {   'loadfirst': true,   'loadimg': true  };  for (var item in conf) {   if (item in co) {    conf.item = co.item;   }  }

这里我主要是想实现，用户配置和默认配置的合并，这样写代码并不是很优雅，现在使用$.extend来做优化，代码如下：

_this.setting = {   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置   "loadNum": 1 //滚动时，当前节点之后加载个数  };  $.extend(_this.setting, _this.getSetting());

这里重点介绍下，我新添加的两个参数mobileHeight,loadNum

mobileHeight 默认客户端的高度，值越大，首屏加载的图片越多;

loadNum 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;

之前我的代码是这样子写的：

_this.loadFirstScreen = function() {   if (conf.loadfirst) {    lazyNode.each(function(i) {     currentNodeTop = $(this).offset().top;     //这里的800就是上面提到的mobileHeight     if (currentNodeTop < mobileHeight + 800) {      _this.replaceImgSrc($(this));     }    });   }  };_this.loadImg = function() {   if (conf.loadimg) {    $(window).on('scroll', function() {     var imgLazyList = $('[node-type=imglazy]', node);     //这里的5就是上面提到的loadNum     for (var i = 0; i < 5; i++) {      _this.replaceImgSrc(imgLazyList.eq(i));     }    });   }  };

按照可配置的想法来优化我现在的代码就是下面的这个样子的：

loadFirstSrceen: function() {   // 加载首屏   var _this = this;   var currentNodeTop;   var imgNodeList = _this.imgNode;   $(imgNodeList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {     _this.replaceImgSrc($(this));    }   });  },  scrollLoadImg: function() {   //滚动的时候加载图片   var _this = this;   var currentNodeTop;   var scrollTop = $('body').scrollTop();   var imgLazyList = $('[node-type=imglazy]');   $(imgLazyList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop - scrollTop < _this.mobileHeight()) {     //加载当前节点后的规定个数节点     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {      _this.replaceImgSrc($(imgLazyList).eq(i));     }     return false;    }   });  }

更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下：

;(function($) { var LoadImgLazy = function(imgNode) {  var _this = this;  _this.imgNode = imgNode;  _this.setting = {   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置   "loadNum": 1 //滚动时，当前节点之后加载个数  };  $.extend(_this.setting, _this.getSetting());  _this.loadFirstSrceen();  $(window).on('scroll', function() {   _this.scrollLoadImg();  }); }; LoadImgLazy.prototype = {  mobileHeight: function() {   return $(window).height();  },  loadFirstSrceen: function() {   // 加载首屏   var _this = this;   var currentNodeTop;   var imgNodeList = _this.imgNode;   $(imgNodeList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {     _this.replaceImgSrc($(this));    }   });  },  scrollLoadImg: function() {   //滚动的时候加载图片   var _this = this;   var currentNodeTop;   var scrollTop = $('body').scrollTop();   var imgLazyList = $('[node-type=imglazy]');   $(imgLazyList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop - scrollTop < _this.mobileHeight()) {     //加载当前节点后的规定个数节点     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {      _this.replaceImgSrc($(imgLazyList).eq(i));     }     return false;    }   });  },  replaceImgSrc: function(loadImgNode) {   //动态替换图片   var srcValue;   var imgDataSrc;   var _this = this;   var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');   if (imgUrlList.length > 0) {    imgUrlList.each(function(i) {     imgDataSrc = $(this).attr('data-lazysrc');     srcValue = $(this).attr('src');     if (srcValue === '#') {      if (imgDataSrc) {       $(this).attr('src', imgDataSrc);       $(this).removeAttr('data-lazysrc');      }     }    });    //移除已经运行过懒加载节点的node-type 对性能提升    $(loadImgNode).removeAttr('node-type');   }  },  getSetting: function() {   var userSetting = $('[lazy-setting]').attr('lazy-setting');   if (userSetting && userSetting !== '') {    return $.parseJSON(userSetting);   } else {    return {};   }  },  destory: function() {   //销毁方法区   $(window).off('scroll');  } }; LoadImgLazy.init = function(imgNode) {  new this(imgNode); }; window.LoadImgLazy = LoadImgLazy;})(Zepto);

通过这篇文章希望大家对javascript瀑布流式图片懒加载有了更深的认识，学会优化方法，谢谢大家的阅读。

上一篇：Bootstarp风格的toggle效果分享

下一篇：javascript瀑布流式图片懒加载实例