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

您的函数有错误：您需要直接访问 arguments 对象，而不是函数的属性。试试这样：

        function preload() {
            for (i = 0; i < arguments.length; i++) {
                images[i] = new Image();
                images[i].src = arguments[i];
            }
        }

根据MDN，您当前使用的语法（ preload.arguments ）已弃用，不适用于所有浏览器。

（如果您检查浏览器的JS控制台，您应该看到报告错误，并且因为循环错误不会运行，因此图像不会预加载。）

Answer 2

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

更好的方法是使用CSS sprites。例如，参见this page，在 Image Sprites - 悬停效果下，您将找到一个使用精灵来悬停效果的示例。

预加载图像，仍然闪烁

2 个答案: