什么是 PWA
PWA 全称 Progressive Web App，是一种新型的 Web 应用程序开发模式，它可以让 Web 应用程序像原生应用程序一样运行。PWA 技术可以让 Web 应用程序在离线状态下也能够正常运行，同时还可以让 Web 应用程序拥有更好的性能和用户体验。
为什么需要图片 lazyload
Web 应用程序中经常会出现大量的图片，如果一次性加载所有的图片，会导致页面加载时间过长，影响用户体验。因此，我们需要一种方法来延迟加载图片，即图片 lazyload。
PWA 技术可以通过 Service Worker 来实现图片 lazyload。Service Worker 是一种运行在浏览器后台的 JavaScript 脚本，它可以拦截网络请求，从缓存中获取资源，从而提高 Web 应用程序的性能和用户体验。
具体来说，我们可以通过以下步骤来实现图片 lazyload：
- 注册 Service Worker
在 Web 应用程序中注册 Service Worker，代码如下：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------------------
------------------ -- -
-------------------- ------ ----------- -- --------------
--
------------ -- -
---------------------- ------ ------------ ------- -- -------
---
-- 编写 Service Worker 脚本
在 Service Worker 脚本中，我们可以拦截网络请求，并从缓存中获取资源。具体来说，我们可以通过以下代码实现图片 lazyload：
-- -------------------- ---- -------
------------------------------ ----- -- -
-- ----------------------------------- -- ----------------------------------- -
------------------
---------------------------
-------------- -- -
-- ---------- -
------ ---------
-
------ --------------------
-------------- -- -
----- -------------- - -----------------
---------------------
----------- -- -
------------------------ ----------------
---
------ ---------
---
--
--
-
---上述代码会拦截所有以 .jpg 或 .png 结尾的网络请求，如果缓存中有对应的资源，就直接返回缓存中的资源；否则，就从网络中获取资源，并将资源存入缓存中。
- 修改图片标签
在 Web 应用程序中，我们需要将所有需要延迟加载的图片的 src 属性修改为 data-src 属性，代码如下：
<img data-src="image.jpg" alt="image">
- JavaScript 脚本
最后，我们需要编写 JavaScript 脚本来实现图片的延迟加载，代码如下：
-- -------------------- ---- -------
----- ------ - -------------------------------------------
----- ---------- - ------- -- -
------------------------- --------------------------------
------------ - -- -- -
----------------------------------
--
--
----- ----------- - --- ------------------------------ ------------ -- -
--------------------- -- -
-- ---------------------- -
-------------------------
------------------------------------
-
---
---
-------------------- -- -
---------------------------
---上述代码会通过 IntersectionObserver 监听所有需要延迟加载的图片，当图片进入视口时，就将其 src 属性修改为 data-src 属性，并将 data-src 属性移除，从而实现图片的延迟加载。
总结
通过 PWA 技术实现图片 lazyload，可以大大提高 Web 应用程序的性能和用户体验。在实际开发中，我们可以根据具体的需求，灵活使用 PWA 技术来实现图片 lazyload。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/667e53c1dc1ed1a61bd9e932