物联网|五种延迟加载图像以提高网站性能的方法( 二 )

#2 使用 Intersection Observer API 延迟加载Intersection Observer API 是一个现代化的界面，你可以利用的延迟加载图片和其他内容。 Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。
换句话说，被异步观察的是一个元素与另一个元素的交集。
Denys Mishunov 有一个关于 Intersection Observer 和使用它的延迟加载图像的很棒的教程。这是他的解决方案的样子。
假设您想延迟加载图片库。每个图像的标记如下所示：
<img data-src=https://mparticle.uc.cn/"image.jpg\" alt=\"test image\">
请注意图像的路径如何包含在data-src属性中，而不是src属性中。原因是使用src意味着图像会立即加载，这不是您想要的。
在 CSS 中，您为每个图像赋予一个min-height值，例如100px. 这为每个图像占位符（没有 src 属性的 img 元素）提供了一个垂直维度：
img { min-height: 100px; /* more styles here */
【物联网|五种延迟加载图像以提高网站性能的方法】然后在JavaScript文档中创建一个config对象并将其注册到一个intersectionObserver实例中：
// create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px' threshold: 0 ; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src ploadImage(entry.target); // the image is now in place stop watching self.unobserve(entry.target););config);
最后，您遍历所有图像并将它们添加到此iterationObserver实例中：
const imgs = document.querySelectorAll('[data-src
'); imgs.forEach(img => { observer.observe(img); );
该解决方案的优点：实施起来轻而易举，有效，并且可以在intersectionObserver计算方面进行繁重的工作。
另一方面，尽管最新版本的大多数浏览器都支持 Intersection Observer API ，但并非所有浏览器都一致支持。幸运的是，有一个polyfill可用。
#3 Lozad.js实现图像延迟加载的一种快速简便的替代方法是让 JS 库为您完成大部分工作。
Lozad 是一个高性能、轻量级和可配置的纯JavaScript惰性加载器，没有依赖项。您可以使用它来延迟加载图像、视频、iframe 等，并且它使用 Intersection Observer API 。
你可以在 npm/Yarn 中包含 Lozad 并使用你选择的模块打包器导入它：
npm install --save lozad yarn add lozad
import lozad from 'lozad';
或者，您可以简单地使用 CDN 下载库并将其添加到 HTML 页面底部的< script>标签中：
<script src=https://mparticle.uc.cn/"https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js\"> </script>
接下来，对于基本实现，将类lozad添加到标记中的资产：
<img class=\"lozad\" data-src=https://mparticle.uc.cn/"img.jpg\">
最后，在你的 JS 文档中实例化 Lozad：
const observer = lozad(); observer.observe();
您将在Lozad GitHub 存储库上找到有关如何使用该库的所有详细信息。
如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在寻找适用于各种内容类型的快速实现，那么 Lozad 是一个不错的选择。
只是，请注意浏览器支持，并最终将此库与 Intersection Observer API 的 polyfill 集成。
#4 图像模糊效果的延迟加载如果您是Medium读者，您肯定已经注意到该网站如何在帖子中加载主图片。
您首先看到的是图像的模糊、低分辨率副本，而其高分辨率版本正在延迟加载。