JavaScript实现图片懒加载

原理

1、 将图片真实路径赋值到img标签的data-src属性中，而不是src属性
2、 获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-src的值赋值到src里去

实现

// 封装图片懒加载类
class LazyLoad {
  constructor(el) {
    this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    this.init(); // 初始化
  }
  // 获取图片与窗口的信息
  getBound(el) {
    let bound = el.getBoundingClientRect();
    let clientHeight = window.innerHeight;
    // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
    return bound.top <= clientHeight - 300; // -300是为了看到效果loading图
  }
  // 判断是否该图片是否可以加载
  canILoading() {
    let imglist = this.imglist;
    for (let i = imglist.length; i--;) {
      this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
	  // 等同于
	  // if(this.getBound(imglist[i])){this.loadImage(imglist[i], i)}
    }
  }
  // 将真实图片路径加载到节点上
  loadImage(el, index) {
    // 获取节点data-src
    let src = el.getAttribute('data-src');
    // 赋值到src，从而请求资源
    el.src = src;
    // 避免重复判断，已经确定加载的图片应当从imglist移除
    this.imglist.splice(index, 1);
  }
  // 当浏览器滚动的时候，继续判断
  bindEvent() {
    window.addEventListener('scroll', () => {
      this.imglist.length && this.canILoading();
    });
  }
  // 初始化
  init() {
    this.canILoading();
    this.bindEvent();
  }
 }
// 实例化对象，参数则是需要使用懒加载的图片类名
const lazy = new LazyLoad('.lazyload')

<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">