预加载图像，仍然闪烁

Posted 2023-05-07

【中文标题】预加载图像，仍然闪烁

【英文标题】：Preloading images, still getting flicker

【发布时间】：2014-01-10 04:41:20

【问题描述】：

我目前正在尝试重新加载大约 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"
        );

这是我目前正在使用的功能，是上面的代码有问题还是可能是另一个问题？

【参考方案1】：

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

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

【参考方案2】：

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

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

根据MDN，您当前使用的语法 (preload.arguments) 已被弃用，并且不适用于所有浏览器。

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

【讨论】：

首先我也是这样，但实际上可以将参数作为命名函数的属性访问，尽管我以前从未见过：jsfiddle.net/fP4Rs

nnnnnn - 感谢您的回复。不知道我会怎么做，如果我按照你的方式做，我应该把所有的图片放在哪里？再次感谢。

@David - 我也从未见过或使用过它，但在看到您的评论后，我在MDN 上查找了它 - 显然它已被弃用，并且并非所有浏览器都支持。 （抱歉，我无法查看您的演示，因为 jsfiddle 无法在我手机的浏览器上运行。）

@CheesePuffs - 你仍然会以完全相同的方式调用该函数。我只是建议您在引用 arguments 对象的方式中对函数进行一些小改动。

@nnnnnn 没错，它已被弃用，在严格模式下会抛出错误，但浏览器支持似乎是合法的，所以我想这不是代码无法按预期工作的原因。