Javascript 为什么这个图像预加载不是'；不行吗？

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

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

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

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

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

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

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

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

谢谢

对我来说很好：

示例：

点击这里

$.fn.preload=函数（）{
这个。每个（函数（）{
$（''，{src:http://dummyimage.com/120x90/f00/fff.png&text=my+图像“}）
.附录（文件正文）；
});

---

虽然我认为你最好把它变成一个实用工具：

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

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

$.preload=函数（arr）{
$。每个（arr，功能（i，v）{
$（'没有方法说明图像是否已预加载。您可以使用image
load
事件确定图像是否已加载

例如

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

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

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

Firefox还有开发者工具插件，可以让你关闭缓存。这与网络标签相结合，应该可以让你在刷新网页后，在网页上做任何事情之前，准确地了解网页上加载的内容

至于预加载脚本，您可能需要检查以下内容：

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

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

$.fn.preload=函数（）{
这个。每个（函数（）{
$（'我这样做的方式是使用图像对象：

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);
}

因此，您的插件应该如下所示（未经测试）：

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

干杯！
$（''）[0]
返回与
新图像（）
相同的img元素
$（''）[0]
-它比创建直接对象花费更多的时间。@victmo，最好移动
var img=new Image（）；
在上面的循环中，您只能使用一个图像对象加载所有图像。没错。我根据您的建议改进了上面的代码。干杯！
 $("img").error(function(){
       //Image load failed
 });

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

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;
    });
}