javascript - 在 html5 中预加载图像是一种好习惯吗

Question

我一直在开发一个新网站，剪裁它的人使用了 Dreamweaver。它将 mm_preloadimages 放入标题中并在正文中使用它。但是，它只加载了更复杂页面上 30 张图像中的 3 张。

即使使用更现代的 html，预加载是否也是一种常见做法？或者这应该留给浏览器下载图像。

Answer 1

这取决于您的需要，根据应用程序/项目的要求。例如，我为特定需求做了一次，我使用了一个hover效果JavaScript，当我将鼠标悬停在元素上时，它只是切换图像，但我意识到，在第一次悬停时它曾经需要更多时间来替换图像，因为图像过去只是在元素上悬停后才加载，这就是我使用图像预加载技术的原因，因此，在页面加载期间，我加载了将要使用的图像用于悬停效果。

因此，这与常规做法无关，而是与您的需求有关，如果您确实需要预加载一些图像，那么您可以使用它，但如果没有必要，请留下它，IMO。

另外，请记住，每次加载图像时，它都会单独HTTP请求加载图像，因此如果在页面加载时加载大量图像，可能会减慢页面加载速度。

Answer 2

预加载概念主要用于在鼠标悬停时具有不同背景图像的菜单。您始终可以使用图像精灵在一张图像中包含您正在使用的所有背景。

我认为现在的常见做法是使用 CSS 来设置菜单样式并完全避免使用图像。如果 CSS 规则不能满足设计需求，可以使用 sprite 将图片合二为一，这样就无需预加载图片，避免大量 http 请求。