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


Posted in Javascript onFebruary 23, 2016

之前写过一版图片“懒加载”的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《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瀑布流式图片懒加载有了更深的认识,学会优化方法,谢谢大家的阅读。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 #Javascript
Web开发必知Javascript技巧大全
Feb 23 #Javascript
JQUERY表单暂存功能插件分享
Feb 23 #Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 #Javascript
jQuery实现返回顶部功能
Feb 23 #Javascript
You might like
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
介绍一下内联、左联、右联
2013/12/31 面试题
大学新生军训自我鉴定范文
2014/09/13 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
信访维稳承诺书
2015/05/04 职场文书