图片懒加载的五种方法

英文原文：https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

# 1. 原生惰性加载

```
js<img src="myimage.jpg" loading="lazy" alt="..." />

正如你所看到的，没有JavaScript，没有src属性值的动态交换，只是普通的原始HTML。

loading属性使我们可以选择延迟视口外图像和iframe，直到用户滚动到它们的附近。

loading有三个值：

- lazy：延迟加载
- eager：立即加载
- auto：浏览器决定是否延迟加载（默认）

兼容处理

```
html 
<img src="hero.jpg" alt=".."/> 
 
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> 
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> 
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> 
<script> 
if ('loading' in HTMLImageElement.prototype) { 
    const images = document.querySelectorAll("img.lazyload"); 
    images.forEach(img => { img.src = img.dataset.src; }); 
 } else { 
 // Dynamically import the LazySizes library
     let script = document.createElement("script"); 
     script.async = true; 
     script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js"; 
     document.body.appendChild(script); 
 } 
 </script>
```

# 2. 使用Intersection Observer API实现懒加载

Intersection Observer是一个新的Api，我们可以利用它来延迟加载图片和其他内容。

```
js<img data-src="image.jpg" alt="test image">
```

⚠注意：图片的路径是包含在data-src属性中的，而不是src属性中的。原因是使用src意味着图像会立即加载。

在CSS中，给每个图像一个最小的高度值，比如100px。这为每个图像占位符（不带src属性的img元素）提供一个垂直高度：

```
css
img {
  min-height: 100px;
  /* more styles here */
}
```

在JavaScript中，创建一个配置对象，并将其注册到IntersectionObserver实例中。

```
js// 创建一个config对象： 对象上有rootMargin和threshold属性
const config = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
}
// 注册这个config对象到IntersectionObserver实例
let observer = new intersectionObserver(function(entries, self) {
    // 遍历每个entry
    entries.foreach(entry => {
        if(entry.isIntersecting) {
            // 实现一个函数，将data-src属性上的路径复制到src属性上
            preloadImage(entry.target)
            // 图片已经替换了，就停止监听
            self.unobserve(entry.target)
        }
    })
})
```

最后，对所有图像进行迭代，并将它们添加到此迭代Observer实例中：

```
jsconst imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
    observer.observe(img)
})
```

这种解决方案的优点是： 实施起来很容易，效果很好，而且让IntersectionObserver在计算方面承担了繁重的计算工作。

另一方面，尽管大多数浏览器在其最新版本中都支持IntersectionObserver API，但并非所有浏览器都一致支持它。幸运的是，可以使用polyfill。

# 3. Lozad.js

实现图片延迟加载的一个快速而简单的替代方案是让JS库为你完成大部分工作。

Lozad是一个高性能、轻量级和可配置的纯JavaScript惰性加载的库，没有依赖关系。你可以使用它来延迟加载图像、视频、iframe等，该库底层使用的是IntersectionObserver API实现。

首先，安装Lozad包

```
jsnpm install --save lozad
```

其次，使用模块bundler引入它

```
jsimport lozad from 'lozad'
```

或者，你也可以使用CDN简单的下载这个库，在页面底部使用`<script>`标签添加：

```
js<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
```

接下来，是基本的实现，在你的`<img>`标签中增加`class="lozad"`:

```
js<img class="lozad" data-src="img.jpg" />
```

最后，在JS中实例化Lozad：

```
jsconst observer = lozad();
observer.observe()
```

如果你不想深入研究IntersectionObserver API的工作原理，或者只是想寻找一种适合于各种内容类型的快速实现，Lozad是一个很好的选择。

只需注意浏览器的支持，并最终将此库与IntersectionObserver API的polyfill集成。

# 4. 具有模糊图像效果的延迟加载

你看到的图像是模糊、低分辨率副本，而它的高分辨率版本正在缓慢加载。

首先引入第三方库progressive-image：

```
html<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css">
<script src="https://cdn.jsdelivr.net/npm/progressive-.js/dist/progressive-image.js" defer></script>
```

或者

```
jsnpm i progressive-image.js
```

其次，添加一个`<img>`标签，带上`class="preview"`,这个用于加载小图片。

然后，添加一个`<a>`标签包裹`<img>`，`<a>`标签带上`class="progressive replace">`，`<a>`标签上的href是大图片的地址。

```
js
<a href="full.jpg" class="progressive replace">
  <img src="tiny.jpg" class="preview" alt="image" />
</a>
```

预览图像和全尺寸图像必须具有相同的纵横比，例如40*30和800*600。

其他功能参考下方链接：

https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/

https://github.com/craigbuckler/progressive-image.js

https://codepen.io/craigbuckler/full/yPqLXW

# 5. Yall.js

https://github.com/malchata/yall.js yall.js是一个SEO友好的惰性加载库，适用于`<video>`元素以及CSS背景图像。它适用于所有现代浏览器。他在可用的情况下使用IntersectionObserver。yall.js还使用Mutation Observer来监控DOM的更改。

yall.js 4 删除了`<img>`、`<picture>`和`<iframe>`元素的惰性加载，因为原生惰性加载覆盖了这些。然而，yall.js 4保留了延迟加载自动播放`<video>`(ala 动画 GIFS)，延迟加载`<video>`元素海报图像以及CSS背景图像的能力。

> 原文地址 https://mp.weixin.qq.com/s/azrgPJt9uOsfbF3MbgYTFw