javascript - 加快img加载

Question

我有一组预加载的图像，我的页面上有九个 img 标签。当我将鼠标悬停在按钮上时，我想用数组中的图像随机替换和打乱九个 imgs。这一切都有效，但它运行缓慢，imgs 重新加载 src。我如何能

var arrayImg = new Array();

arrayImg[0] = new Image();

<img id="img0" >

然后做：

document.getElementbyID("img0").src = arrayImg[random_ndx].src;

有 9 张图片。

我在一台新的快速 pc 上运行 ie8，但图像变化有一个非常明显的滞后。所以，我的问题；如何将缓存图像（arrayImg [random_ndx]）直接分配给页面上的元素（）？

Answer 1

使用.replaceChild.

local old = document.getElementbyID("img0")
old.parent.replaceChild(arrayImg[random_ndx], old)

请注意，任何元素都不能位于页面上的多个位置，因此如果您从arrayImg某个位置放置元素然后使用它替换另一个图像，您将不会有两个图像，它将从其先前位置移动到新位置。

Answer 2

您可以加载图像并将其隐藏。然后你需要显示隐藏的图像。这就是我模拟缓存数组的方式。