在 Javascript 中优雅地预加载图像（没有任何 JS 库）？答案

【问题标题】：Preloading image gracefully in Javascript (without any JS library)?在 Javascript 中优雅地预加载图像（没有任何 JS 库）？
【发布时间】：2010-10-13 14:39:56
【问题描述】：

我有一张设置了 src 属性的图片。

我想更换图像，但与服务器的连接速度很慢，而且加载新图像所需的时间也不容忽视。

是否有可能创建内部 Image 对象，在其上设置“onLoadListener”类型，加载图像，然后将其设置为原始图像 src 属性？

【问题讨论】：

有可能，但取决于客户端的缓存设置。如果客户端完全关闭缓存，您将获得双倍的请求计数。（一个用于尝试预加载图像，一个用于实际显示）（使用Image）
幸运的是我的用例中启用了缓存:)

标签： javascript image src preloading

【解决方案1】：

你可以像这样在 JavaScript 中预加载图片...

myImage = new Image();
myImage.onload = function () { alert("Loaded"); };
myImage.src = "logo.gif";

您可以将逻辑放在页面上弹出图像而不是警报。

【讨论】：

但是当我的连接速度很慢时，用户会看到一段时间的空白图像。所以我应该像这样加载 Image 并设置 myActualImageOnPage.src = myImage.src
@pixel 是的，他的意思是在你的虚拟图像对象的onload 方法中改变你真实元素上的src。