[](https://res.cloudinary.com/practicaldev/image/fetch/s--ntGPFLxg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /thepracticaldev.s3.amazonaws.com/i/nptus1dcu12hkhdnjghc.png)

延迟加载是一种编程实践,其中组件仅在需要时加载。这极大地提高了性能,尤其是当加载组件所需的时间很长,并且应用程序中有多个这样的组件时。

在网页中,图像/社交小部件/广告/视频等主要是由于它们的大小或它们加载的资源而导致页面加载时间的增加。因此,为了减少页面加载时间,绝对有必要在需要时延迟加载所有这些不重要的组件。

又一个延迟加载 JavaScript 库,为什么?

现有的延迟加载库与滚动事件挂钩或使用周期性计时器并在需要延迟加载的元素上调用getBoundingClientRect()。然而,这种方法非常缓慢,因为每次调用getBoundingClientRect()都会迫使浏览器重新布局整个页面,并且会给您的网站带来相当大的卡顿。

IntersectionObserver的设计目的是让这更加高效和高性能,它已登陆 Chrome 51。IntersectionObservers 让您知道观察到的元素何时进入或退出浏览器的视口。

介绍 Lozad.js:

• 使用纯 JavaScript 高效地延迟加载元素,

• 是一个轻量级库,仅 535 字节 缩小和 gzip 压缩,

• 没有依赖关系 :)

• 也允许延迟加载动态添加的元素。

安装

# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn.
$ yarn add lozad

# Another option is to use Bower.
$ bower install lozad

进入全屏模式 退出全屏模式

或通过 CDN 加载并包含在页面的head标记中。

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

进入全屏模式 退出全屏模式

用途

在 HTML 中,为元素添加一个标识符(默认选择器标识为lozad类):

<img class="lozad" data-src="image.png" />

进入全屏模式 退出全屏模式

您现在需要做的只是实例化 Lozad,如下所示:

// lazy loads elements with default selector as '.lozad'
const observer = lozad();
observer.observe();

进入全屏模式 退出全屏模式

有关详细信息,请查看 Github 上的Lozad.js repo