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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
vue实现全选、反选功能
Nov 17 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
浅谈javascript错误处理
Aug 11 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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 eval函数用法总结
2012/10/31 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Django的数据模型访问多对多键值的方法
2015/07/21 Python
用Python抢过年的火车票附源码
2015/12/07 Python
python连接mysql实例分享
2016/10/09 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
pandas多级分组实现排序的方法
2018/04/20 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
副总经理工作职责
2013/11/28 职场文书
社区党员先进事迹
2014/01/22 职场文书
初中生期末评语大全
2014/04/24 职场文书
社区服务活动报告
2015/02/05 职场文书
思想道德自我评价2015
2015/03/09 职场文书