什么是 PWA？
PWA 全称是 Progressive Web Apps，中文名为渐进式 Web 应用。它是一种新型的 Web 应用，可以让网站具备原生 App 的功能和体验，如添加到主屏幕、离线缓存、推送通知等。
相比于传统的 Web 应用，PWA 具有更快的加载速度、更好的用户体验以及更高的活跃率。因此，越来越多的 Web 开发者开始关注和学习 PWA。
为什么要实现图片懒加载？
图片是 Web 页面中不可或缺的元素，然而图片过多过大会使页面加载变慢，降低用户体验。因此，实现图片懒加载，即在视线范围内才加载图片，可以有效地减少页面的加载时间，提高用户体验。
PWA 中实现图片懒加载的方案
使用 Intersection Observer API
Intersection Observer API 是浏览器提供的一种用于检测目标元素与其祖先或 viewport 之间交叉状态的 API。通过监听目标元素与视口的交叉状态，我们可以轻松实现图片的懒加载。
<img data-src="https://example.com/image.jpg" alt="图片" />
-- -------------------- ---- -------
----- -------- - -- -- -
----- ------ - -------------------------------------------
-- ---------------------- -
--- -------- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
--- ----- - -------------
--------- - ------------------
----------------------------------
--------------------------
-
---
---
-------------------- -- -
------------------------
---
- ---- -
-------------------- -- -
--------- - ------------------
----------------------------------
---
-
--
-- -----------------
----------------------------------- ----------以上代码定义了一个 lazyLoad 函数，它通过 Intersection Observer 监听页面中所有 data-src 属性的图片元素是否进入了视口，如果进入了视口，就将图片的 data-src 属性赋值给 src 属性，并将 data-src 属性删除。如果浏览器不支持 Intersection Observer API，则直接将 data-src 属性赋值给 src 属性。
同时，通过监听页面滚动事件，触发 lazyLoad 函数实现了图片的懒加载。
使用第三方库
除了使用 Intersection Observer API，我们还可以使用第三方库来实现图片的懒加载，如 Lazy Load、LazyLoadxt、Lozad 等。这些库通过监听页面滚动事件或使用 Intersection Observer API 来实现图片的懒加载，并且具有更加灵活的配置和更好的性能表现。
<img data-src="https://example.com/image.jpg" alt="图片" class="lazy" />
-- -------------------- ---- ------- -- ---- ---- ----- -------- - --- ---------- ------------------ -------- -- ---------- --- -- ---------- ------------------------ -- ----- ----- -------- - --------------- - ----------- ------ ----- -- -------- ---------- ---- -- ------------------------------------------ --- -------------------
以上代码分别使用了 Lazy Load、LazyLoadxt、Lozad 三个库实现了图片的懒加载，它们的使用方法比较简单，只需要在需要懒加载的图片元素上添加 data-src 属性和 lazy 类，并在 JavaScript 中初始化即可。
总结
实现图片懒加载可以有效地提高页面的加载速度和用户体验，同时使用 PWA 技术可以使 Web 应用具备更好的性能和体验。本文介绍了使用 Intersection Observer API 和第三方库来实现图片懒加载的方案，建议大家根据实际情况选择合适的方案并进行实践。
参考链接
- https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- https://github.com/verlok/lazyload
- https://github.com/ressio/lazy-load-xt
- https://github.com/ApoorvSaxena/lozad.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f828948841e9894f23fe8