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

Question

我在一个名为 plugins.js 的文件中有这个功能：

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

然后我将它放在另一个名为 footer.js 的文件中：

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

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

图像都在一个名为“graphics”的文件夹中。

我怀疑图像没有预加载，因为当我将鼠标悬停在按钮上时加载图像需要一点时间（我将图像用于 mouseOver 效果）。

是否有任何方法可以检查图像是否已预加载？我可以使用上面的脚本吗？

我不太擅长 jquery，因此感谢代码帮助。

谢谢

Answer 1

没有方法可以说明图像是否已预加载。可以通过图片load事件判断图片是否加载。

例如

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

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

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

Answer 2

您好，先生，您可以使用 firefox 中的 firebug 或 chrome 中的开发者控制台检查您的图像是否已预加载。它们都有标签（分别是 Net 和 Network），可让您监控浏览器发出的所有请求。

Firefox 也有开发者工具插件，可以让你关闭缓存。这与“网络”选项卡相结合，应该可以让您准确了解网页上加载的内容，然后再在刷新后对网页本身进行任何操作。

关于预加载脚本；你可能想看看这个：

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 3

对我来说很好用：

示例： http://jsfiddle.net/98rXx/

<button id='click'>click here</button>

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

$(["http://dummyimage.com/120x90/f00/fff.png&text=my+image"]).preload();

  // clicking the button displays the image immediately
$('button').click(function() {
    $('<img>',{src:"http://dummyimage.com/120x90/f00/fff.png&text=my+image"})
        .appendTo(document.body);
});

---

虽然我认为你最好让它更像一个实用程序：

$.preload = function( arr ){
    $.each( arr, function(i,v){
        $('<img/>')[0].src = v;
    });
};

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

Answer 4

您的脚本应该可以工作，但如果图像位于不同的目录（图形）中，您需要扩展路径：

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

Answer 5

我的做法是使用 Image 对象：

var img = new Image();
img.src = 'image.jpg';
img.onload = function(){
    alert('Image has been preloaded! width: '+ this.width + ', height: '+this.height);
};
img.onload = function(){
    alert('There was an error loading: '+this.src);
}

所以你的插件应该看起来像这样（未经测试）：

$.fn.preload = function(){
    var img = new Image();
    this.each(function(){
        img.src = this;
    });
}

不过，您需要使用 onload 回调来确保所有图像都已加载，或者只是等待。

干杯！