javascript - 预加载图像，仍然闪烁

Question

我目前正在尝试重新加载大约 30-40 张图片。但是，当我将鼠标悬停在图像上时，我仍然会出现这种“闪烁”。图像消失了几毫秒，然后又回来了。

        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image();
                images[i].src = preload.arguments[i];
            }
        }
        preload(
            "/../../regular.png",
            "/../../hover.png"
        );

这是我目前正在使用的功能，是上面的代码有问题还是其他问题？

Answer 1

即使像这样预加载图像，我不确定您是否可以避免悬停时的闪烁。我想浏览器仍然必须从磁盘加载它们，这就是导致几毫秒延迟的原因。

更好的方法是使用 CSS Sprite 。参见例如 this page ，在 Image Sprites - Hover Effect 下，您会找到一个使用 sprites 实现悬停效果的示例。