在现代网站中，图片和其他资源的加载可以成为页面性能最大的瓶颈之一。特别是当页面上有大量图像时，它们可能会显著延长页面加载时间。
为了解决这个问题，很多开发人员使用懒加载技术，也就是当用户滚动到特定位置时才加载图像。这样可以减少首次页面加载时间，并且可以改善用户体验。
Lozad.js 是一个高性能、无依赖的纯 JavaScript 插件，可用于实现任何元素的懒加载。本文将介绍如何使用 Lozad.js 实现图片懒加载，并提供示例代码。
Lozad.js 的优点
与其他懒加载库相比，Lozad.js 具有以下优点：
- 轻量级：Lozad.js 仅有 1KB 大小，而且没有任何依赖。
- 高性能：Lozad.js 使用 Intersection Observer API 来检测元素是否在视口中。这种方式比传统的滚动事件监听更加高效。
- 可配置：Lozad.js 可以通过选项进行配置，如根元素、阈值等。
如何使用 Lozad.js
步骤 1：引入 Lozad.js
首先，需要在页面中引入 Lozad.js 文件。可以使用以下代码从 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>
步骤 2：添加 HTML 图像元素
接下来，需要在 HTML 中添加要懒加载的图像元素。请注意，data-src 属性用于存储实际图像的 URL，而 src 属性留空。
<img class="lozad" data-src="path/to/image.jpg" src="">
步骤 3：初始化 Lozad.js
最后，在 JavaScript 中初始化 Lozad.js。可以使用以下代码：
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // 视口增加10像素，加载更多预备的图像
threshold: 0.1 // 检测视口上是否有10%的图片或元素进入视野
});
observer.observe();现在，当用户滚动到页面上的图片时，Lozad.js 将会自动加载它们。同时，如果图像出现在视口之外，则不会加载它们，这样可以减轻页面的负担。
示例代码
以下是完整的示例代码，演示如何使用 Lozad.js 实现懒加载。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
------- ---------------------------------------------------------------------------
-------
--- -
------ -----
-
--------
-------
------
---- ------------- ----------------------------- -------
---- ------------- ----------------------------- -------
---- ------------- ----------------------------- -------
---- ------------- ----------------------------- -------
---- ------------- ----------------------------- -------
--------
----- -------- - --------------- -
----------- ----- -----
---------- ---
---
-------------------
---------
-------
-------结论
Lozad.js 是一个优秀的懒加载库
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41364
