做有态度的前端团队

网易FEG前端团队

图片懒加载

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

这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。
一个简单的图片懒加载共涉及两个方面:

HTML 约定

给img元素添加class="m-lazyload",同时将img src赋值给data-src属性。

<img class="m-lazyload" data-src="imgUrl">

JavaScript 实现

  1. 添加页面滚动监听事件
window.addEventListener('scroll', _delay, false);
  function _delay() {
    clearTimeout(delay);
    delay = setTimeout(function () {
      _loadImage();
    }, time);
  }
  1. 当触发监听事件时会执行_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));
}

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

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

这里还可以做些优化:

  1. 图片加载后移除选择器,避免重复判断。

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

  3. 扩展prototype添加getNode方法,支持分页数据懒加载。

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif