前言：最近面试都被问到了这个问题，所以在这里整理一波。

懒加载的意义

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数，对服务器缓压。

**预加载:**提前加载好，缓存到本地，当需要的时候直接读取缓存，对服务器增压

懒加载实现方式

第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟
第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载
第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片

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

1、懒加载HTML约定

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

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

2、懒加载JavaScript实现

动态加载总共分为以下几个步骤:
1、添加页面滚动监听事件

imgBoxList.addEventListener('scroll', debounce(() => {
  _loadImage();
}, 200));
 
// 简单的防抖函数
function debounce(func, delay) {
  let timer

  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

2、当触发监听事件时会执行 _loadImage 函数，该函数负责加载图片

function _loadImage() {
	const domOffsetHeight = imgBoxList.offsetHeight;
  const imgs = imgBoxList.querySelectorAll('img[data-src]');
  for (let i = 0; i < imgs.length; i++) {
    const el = imgs[i];
    if (_isShow(el, domOffsetHeight)) {
      el.src = el.getAttribute('data-src')
    }
  }
}

3、判断该图片是否在当前窗口的可视区域内

function _isShow(el, domHeight) {
  const rect = el.getBoundingClientRect();
  return rect.top <= domHeight + 200;
}

到这一个简单的图片懒加载就写成了

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