我正在寻找一个快速和简单的方法，预加载图像与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插件在那里做这个，但他们似乎都有点大(大小);我只需要一个快速，简单和短的方式预加载图像!
当前回答
简单快捷:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
或者，如果你想要一个jQuery插件:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
其他回答
这个jquery imageLoader插件只有1.39kb
用法:
$({}).imageLoader({
images: [src1,src2,src3...],
allcomplete:function(e,ui){
//images are ready here
//your code - site.fadeIn() or something like that
}
});
还有其他选项，比如您想要同步或异步加载图像，以及为每个单独的图像提供完整的事件。
JP，在检查了您的解决方案后，我仍然在Firefox中有问题，在加载页面之前它不会预加载图像。我是通过在服务器端脚本中添加一些sleep(5)来发现这一点的。我实施了以下解决方案的基础上，似乎解决这个问题。
基本上，我添加了一个回调到你的jQuery预加载插件，这样它就会在所有图像都正确加载后被调用。
// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
for (var i = 0; i < this.length; i++) {
if (this[i] == element) { this.splice(i,1); }
}
};
// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
checklist = this.toArray();
this.each(function() {
$('<img>').attr({ src: this }).load(function() {
checklist.remove($(this).attr('src'));
if (checklist.length == 0) { callback(); }
});
});
};
出于兴趣，在我的背景下，我使用这个方法如下:
$.post('/submit_stuff', { id: 123 }, function(response) {
$([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
// Update page with response data
});
});
希望这能帮助那些从谷歌(和我一样)来到这个页面，寻找在Ajax调用上预加载图像的解决方案的人。
即使在IE9中，这也适用于我:
$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });
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*/
}
)
我会使用Manifest文件告诉(现代)网络浏览器也加载所有相关图像并缓存它们。使用Grunt和Grunt -manifest自动完成这个任务，再也不用担心预加载脚本、缓存失效器、CDN等问题。
https://github.com/gunta/grunt-manifest
