在前端开发中，我们经常需要在页面中加载多张图片。但是，如果在用户访问页面时才开始加载这些图片，会导致网站响应速度变慢，影响用户体验。因此，我们通常会使用预加载技术来提前下载这些图片，以确保它们在用户需要时能够立即显示。
那么，在 JavaScript 中，如何预加载多张图片？以下是几种不同的方法：
1. 使用 Image 对象
JavaScript 中有一个内置的 Image 对象，可以用于创建一个新的 <img> 元素，并将其添加到 DOM 中进行预加载。我们可以通过创建多个 Image 对象来预加载多张图片。
----- ------ - -------------- ------------- --------------
----- ------- - ---
--- ---- - - -- - - -------------- ---- -
----- --- - --- --------
------- - ----------
------------------
-
-- --------------
--------------------------- -- -
------ --- --------------- -- -
-- -------------- -
----------
- ---- -
---------------------------- ---------
----------------------------- ---------
-
--
----------- -- -
---------------- ------ ---- ---- ------ ----------------
---首先，我们定义了一个数组 images，包含需要预加载的图片的 URL。然后，我们创建了一个空数组 imgList，用于存储所有的 Image 对象。接下来，我们使用 for 循环遍历 images 数组，为每个 URL 创建一个新的 Image 对象，并将其添加到 imgList 数组中。在全部图片加载完成后，我们使用 Promise.all 来等待所有图片都成功加载，并在控制台中打印一条消息。
2. 使用 XMLHttpRequest
除了使用 Image 对象之外，我们还可以使用 XMLHttpRequest 对象来预加载图片。这种方法的好处是可以获取到图片的二进制数据，以便进行其他处理（例如，对图片进行压缩或调整大小）。
----- ------ - -------------- ------------- --------------
----- ------- - ---
--- ---- - - -- - - -------------- ---- -
----- --- - --- -----------------
--------------- ---------- ------
---------------- - -------
---------- - ---------- -
-- ------------ --- ---- -
----- --- - --- --------
------- - -----------------------------------
------------------
-
--
-----------
-
-- --------------
--------------------------- -- -
------ --- --------------- -- -
-- -------------- -
----------
- ---- -
---------------------------- ---------
----------------------------- ---------
-
--
----------- -- -
---------------- ------ ---- ---- ------ ----------------
---与第一种方法相比，这里我们使用 XMLHttpRequest 对象来发送 GET 请求获取图片，并将其转换为 blob 对象。然后，我们使用 URL.createObjectURL 方法来创建一个临时的 URL，并将其赋值给 img.src 属性。最后，我们将每个加载成功的图片对象存储在 imgList 数组中，并使用 Promise.all 等待所有图片加载完成，并在控制台中打印一条消息。
3. 使用 CSS sprite
除了上述两种方法之外，还有一种常见的预加载技术是使用 CSS sprite。CSS sprite 是一种将多张图片合并成一张大图的技术，以减少 HTTP 请求和提高加载速度。在预加载时，我们只需要加载这张大图即可。
-------- - -------- ----- ----------------- ------------------ - --------------- - -------------------- --- ---- ------ ------ ------- --- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------