javascript - 为什么这个图像预加载不起作用？

Question

我在名为 plugins.js 的文件中有这个函数:

$.fn.preload = function(){
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

然后我将其保存在另一个名为 footer.js 的文件中:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

所有这些不应该预加载图像吗？

所有图片都在名为“graphics”的文件夹中。

我怀疑图像没有预加载，因为当我将鼠标悬停在按钮上时图像需要一些时间来加载(我使用图像来实现鼠标悬停效果)。

有没有什么方法可以检查图像是否已经预加载？我可以用上面的脚本这样做吗？

我对 jquery 不是很在行，因此非常感谢代码帮助。

谢谢

Answer 1

没有方法可以说明图像是否已预加载。您可以使用图像 load 事件来确定图像是否已加载。

例如

$("img").load(function(){
   //Image loaded
});

如果由于任何原因导致图像加载失败，也会触发错误事件

 $("img").error(function(){
       //Image load failed
 });