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实现计算代码行数的简单方法附代码
Aug 13 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php eval函数一句话木马代码
2015/05/21 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python中datetime模块参考手册
2017/01/13 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python如何将字符串转换为日期
2020/07/31 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
工程造价专业大学生自荐信
2013/10/01 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
学术会议主持词
2014/03/17 职场文书
信息技术课后反思
2014/04/27 职场文书
计生专干事迹
2014/05/28 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年法院工作总结
2014/11/24 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
详解Go语言中Get/Post请求测试
2022/06/01 Golang