当你的网站需要加载大量图片时，为了提高用户体验和性能，你可能会想要缓存图片。在JavaScript中，可以使用Image对象来缓存图片。
缓存单个图片
以下是缓存单个图片的示例代码：
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = () => {
// 图片已经被缓存
};这里通过创建一个新的Image对象并给它设置src属性来加载图片。当图片加载完成后，onload事件将被触发，此时图片已经被缓存到浏览器中了。
缓存多个图片
如果需要缓存多个图片，我们可以使用一个数组来存储所有的Image对象，并在所有图片都加载完成后执行一些操作。以下是缓存多个图片的示例代码：
-- -------------------- ---- -------
----- ------ - -
---------------------
---------------------
--------------------
--
----- ----- - ---
--- ----------- - --
-------------------- ------ -- -
----- --- - --- --------
------- - ----
---------- - -- -- -
--------------
------------ - ----
-- ------------ --- -------------- -
-- ----------
-
--
------------ - ----
---这里首先定义一个包含所有图片路径的数组，然后遍历数组来创建Image对象并加载图片。每当一个图片加载完成后，onload事件将被触发，并将该图片对象存储到一个缓存数组中。当所有图片都被加载完成时，loadedCount变量的值等于images数组的长度，此时可以在回调函数中执行一些操作。
指导意义
JavaScript中缓存图片是提高网站性能和用户体验的有效方法之一。在实际开发中，我们需要根据具体情况来选择适合自己的缓存方案。同时，为了进一步提高性能，我们还可以考虑使用CSS Sprites、Lazy Load等技术来优化图片加载。
总之，在前端开发中，优化网站性能是我们不断追求的目标之一，缓存图片是其中一个简单而有效的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14959