Question

我在名为 plugins.js ：

的文件中使用此功能

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

然后我在另一个名为 footer.js 的文件中有这个：

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

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

图像全部位于名为“图形”的文件夹中。

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

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

我对jquery不太满意，所以感谢代码帮助。

由于

Answer 1

对我来说很好：

示例： 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 2

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

E.g

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

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

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

Answer 3

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

Firefox还有开发人员工具插件，可以让你关闭缓存。这与“网络”选项卡相结合，可以让您准确了解网页上加载的内容，然后再刷新后在网页上做任何事情。

至于预加载脚本;你可能想看看这个：

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

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回调来确保所有图像都已加载，或者只是等待。

干杯！

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

5 个答案: