PWA（Progressive Web App）是指利用 Web 技术开发的具有原生应用程序体验的 Web 应用程序，它可以像原生应用程序一样在离线状态下工作，并且具有可靠的性能。然而，在 PWA 应用中，图片显示问题是很常见的难题。本文将详细讲解解决 PWA 应用中图片显示问题的常见技巧及实现方法。
问题描述
在 PWA 应用中，图片的显示问题主要包括以下几个方面：
长时间不变化的图片，如 Logo、背景图等，在启动应用时加载即可，不必每次都进行网络请求，同时可以使用缓存技术，提高加载速度和性能。
动态加载的图片，在应用中使用的图片可能会根据不同的交互和事件需要动态加载，这时候需要控制图片的加载方式和事件触发时机，以避免并发请求和卡顿现象。
图片加载失败的问题，比如网络不稳定或者图片地址错误导致图片无法正确加载，此时需要有针对性的处理措施，以保障用户体验。
解决方案
以下是解决 PWA 应用中图片显示问题的常见技巧及实现方法：
1. 长时间不变化的图片的处理
对于长时间不变化的图片，比如 Logo、背景图等，我们可以将它们作为静态资源，使用缓存技术进行优化。具体实现方式如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------------
----- ---------- ---------------- -------------------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------- ----------------------------------- --
----- -------------- --------------------- --
-------
------
---- --------------------------------
--------
-- --------- -- ------- -
------
--------------------
-------------- ------- -
------------------------------
------------------------------------
--
--------------- -- -
----------------------
---
-
---------
-------
-------在这段代码中，我们使用 caches API 来进行缓存，先打开一个名为 image-cache 的缓存空间，然后添加固定不变的图片资源。
2. 动态加载图片的处理
对于动态加载的图片，我们需要控制图片的加载时间和事件触发时机，以避免并发请求和卡顿现象。具体实现方式如下：
let img = new Image();
img.src = "http://domain.com/img-name.jpg";
img.onload = function () {
document.body.appendChild(img);
};在这段代码中，我们使用 Image 对象来加载图片，使用 onload 事件来在图片完全加载后进行展示，这样可以避免因同时加载多张图片而导致的网络阻塞和网页卡顿等问题。
3. 图片加载失败的处理
对于图片加载失败的情况，我们需要有针对性的处理措施，以保障用户体验。以下是一些处理方式：
使用占位图或者错误图片，以避免图片加载失败后会出现空白或者无法正确显示的情况。
尝试重新加载图片，如果加载失败，可以考虑采用重新加载或者使用默认图片的方式来解决。
使用指示器来显示图片的加载状态，以便用户可以及时了解图片加载的情况。比如使用
UIActivityIndicatorView、UIProgressView等工具。
总结
以上就是解决 PWA 应用中图片显示问题的常见技巧及实现方法。最终的目的是为了提高用户体验和应用性能，避免因图片加载问题而导致的其他业务问题。需要注意的是，实际情况中不同的应用场景和不同的图片资源需要采用不同的处理方式，在使用过程中需要根据具体情况来进行调整和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64867bb148841e989450a9e2