我正在寻找一个快速和简单的方法，预加载图像与JavaScript。如果这很重要，我将使用jQuery。
我在这里看到了这个(http://nettuts.com...):)
function complexLoad(config, fileNames) {
for (var x = 0; x < fileNames.length; x++) {
$("<img>").attr({
id: fileNames[x],
src: config.imgDir + fileNames[x] + config.imgFormat,
title: "The " + fileNames[x] + " nebula"
}).appendTo("#" + config.imgContainer).css({ display: "none" });
}
};
但是，对于我想要的东西来说，这看起来有点夸张!
我知道有jQuery插件在那里做这个，但他们似乎都有点大(大小);我只需要一个快速，简单和短的方式预加载图像!
当前回答
jQuery.preloadImage=function(src,onSuccess,onError)
{
var img = new Image()
img.src=src;
var error=false;
img.onerror=function(){
error=true;
if(onError)onError.call(img);
}
if(error==false)
setTimeout(function(){
if(img.height>0&&img.width>0){
if(onSuccess)onSuccess.call(img);
return img;
} else {
setTimeout(arguments.callee,5);
}
},0);
return img;
}
jQuery.preloadImages=function(arrayOfImages){
jQuery.each(arrayOfImages,function(){
jQuery.preloadImage(this);
})
}
// example
jQuery.preloadImage(
'img/someimage.jpg',
function(){
/*complete
this.width!=0 == true
*/
},
function(){
/*error*/
}
)
其他回答
即使在IE9中，这也适用于我:
$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });
谢谢你!我想在J-P的答案上添加一个小riff -我不知道这是否会帮助任何人，但这样你就不必创建一个图像数组，如果你的拇指正确命名，你可以预加载所有的大图像。这很方便，因为我有一个用html编写所有页面的人，它可以确保他们少做一步——消除创建图像数组的需要，以及另一个可能会搞砸的步骤。
$("img").each(function(){
var imgsrc = $(this).attr('src');
if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
imgsrc = thumbToLarge(imgsrc);
(new Image()).src = imgsrc;
}
});
基本上，对于页面上的每张图像，它都会抓取每张图像的src，如果它符合某些条件(是拇指，或主页图像)，它会更改名称(图像src中的基本字符串替换)，然后加载图像。
在我的例子中，页面上满是拇指图像，它们的名称都类似image_th.jpg，而所有相应的大图像的名称都是image_lg.jpg。thumb to large只是将_th.jpg替换为_lg.jpg，然后预加载所有大图像。
希望这能帮助到一些人。
我使用以下代码:
$("#myImage").attr("src","img/spinner.gif");
var img = new Image();
$(img).load(function() {
$("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";
我会使用Manifest文件告诉(现代)网络浏览器也加载所有相关图像并缓存它们。使用Grunt和Grunt -manifest自动完成这个任务，再也不用担心预加载脚本、缓存失效器、CDN等问题。
https://github.com/gunta/grunt-manifest
我有一个小插件处理这个。
它被称为waitForImages，它可以处理img元素或CSS中任何引用图像的元素，例如div {background: url(img.png)}。
如果你只是想加载所有的图像，包括在CSS中引用的图像，这里是你如何做的:)
$('body').waitForImages({
waitForAll: true,
finished: function() {
// All images have loaded.
}
});
