JavaScript关于图片懒加载最简单的两种方法

图片懒加载的实现思路：当后端返回给前端图片的链接后，将正确的链接放在img标签的一个隐藏属性里，当img标签可见时赋予正确的属性，这时才开始加载图片。

当所展示的列表数据过多时，这种方法很有效。

方法一：

把正确的链接设置到一个隐藏的属性里，可见时转换

当元素可见时，将 data-src 里的数据写到 src 里(可利用 DataSet API 实现)
<img data-src="dumogu.jpg">

img.src = img.datset.src;

判断元素是否可见也有很多解决方法，下面这种最简单

//InterpObserver观察一个DOM元素的可见性，监听其位置的变化。
const observer = new IntersectionObserver((changes) => {
  // changes: 目标元素集合，遍历添加监听回调
  changes.forEach((change) => {
    // 当元素可见时进行转换
    if (change.isIntersecting) {
      const img = change.target;
      img.src = img.dataset.src;
      observer.unobserve(img); //替换后停止观察
    }
  });
});
//img: 你想要观察的img元素
observer.observe(img);

方法二：

浏览器已经实现了图片懒加载这个功能，加上一个属性就行了

<img src="dumogu.jpg" loading="lazy">

关于 loading 属性的文章也可以查看 Native image lazy-loading for the web!

两种方法虽然简单，但是兼容性不是很好，在此仅作学习记录用