实现一个图片的懒加载插件有多难

阅读 2022
收藏 195
2016-10-14
原文链接:segmentfault.com

插件完整版地址 m-lazy

Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制。

这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。

一个简单的图片懒加载共涉及两个方面,

1. HTML 约定

我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。
具体示例为:

2. JavaScript 实现

动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数

1. 添加页面滚动监听事件
window.addEventListener('scroll', _delay, false);

function _delay() {
  clearTimeout(delay);
  delay = setTimeout(function () {
    _loadImage();
  }, time);
}
2. 当触发监听事件时会执行 _loadImage 函数,该函数负责加载图片
function _loadImage() {
  for (var i = imgList.length; i--;) {
    var el = imgList[i];
    if (_isShow(el)) {
      el.src = el.getAttribute('data-src');
      el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
      imgList.splice(i, 1);
    }
  }
}

虽然执行了_loadImage函数,但是我们得知道哪些图片需要被加载,这里的判断依据是什么呢?

依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个_isShow函数来实现

function _isShow(el) {
  var coords = el.getBoundingClientRect();
  return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerheight="" ||="" document.documentelement.clientheight)="" +="" parseint(offset));="" }<="" code="">

自此一个图片加载的闭环就形成了

当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将data-src的值赋予该图片。

太简单了?

事实就是如此!!!

如此简单,不妨扩展一下

  1. 添加一些自定义参数,谁都喜欢自定义,不是吗?

  2. 支持iScroll, iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。

这里我们做了些优化
  1. 图片加载后移除选择器,避免重复判断。

  2. 缓存img元素结合,减少dom元素查询性能损耗

  3. 扩展prototype添加getNode方法,支持分页数据懒加载(由于我们之前缓存了dom元素)

OK!说了这么多,show me the code 吧!


(function () {
  var imgList = [],  // 页面所有img元素集合
    delay,   // setTimeout 对象
    offset,  //偏移量,用于指定图片距离可视区域多少距离,进行加载
    time,  // 延迟载入时间
    _selector; // 选择器 默认为 .m-lazyload

  function _isShow(el) {
    var coords = el.getBoundingClientRect();
    return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerheight="" ||="" document.documentelement.clientheight)="" +="" parseint(offset));="" }="" function="" _loadimage()="" {="" for="" (var="" i="imgList.length;" i--;)="" var="" el="imgList[i];" if="" (_isshow(el))="" el.src="el.getAttribute('data-src');" el.classname="el.className.replace(new" regexp("(\\s|^)"="" _selector.substring(1,="" _selector.length)="" "(\\s|$)"),="" "="" ");="" imglist.splice(i,="" 1);="" _delay()="" cleartimeout(delay);="" delay="setTimeout(function" ()="" _loadimage();="" },="" time);="" imagelazyload(selector,="" options)="" defaults="options" {};="" offset="defaults.offset" 0;="" time="defaults.time" 250;="" _selector="selector" '.m-lazyload';="" this.getnode();="" _delay();="" 避免首次加载未触发touch事件,主动触发一次加载函数="" (defaults.iscroll)="" defaults.iscroll.on('scroll',="" _delay);="" defaults.iscroll.on('scrollend',="" else="" window.addeventlistener('scroll',="" _delay,="" false);="" imagelazyload.prototype.getnode="function" imglist="[];" nodes="document.querySelectorAll(_selector);" l="nodes.length;" <="" l;="" i++)="" imglist.push(nodes[i]);="" };="" })();="" code="">
评论