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 相关文章推荐
js数组去重的常用方法总结
Jan 24 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
实例讲解python函数式编程
2014/06/09 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python编写打字训练小程序
2019/09/26 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
表扬稿范文
2015/01/17 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
高中军训感想
2015/08/07 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书