我正在寻找一个快速和简单的方法，预加载图像与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(imgs) {
$(imgs).each(function(index, value) {
$('<img />').attr('src', value).appendTo('body').css('display', 'none');
});
}
.attr(“src”,值) 不 .attr(“src”,这个)
只是指出一点:)
其他回答
对于那些知道一点点actionscript的人，你可以检查flash播放器，用最小的努力，并制作一个flash预加载器，你也可以导出到html5/Javascript/Jquery。 如果flash播放器未被检测到，请检查如何将youtube角色返回到html5 player的示例:) 并且创造你自己的。 我没有细节，因为我还没有开始，如果我不忘记，我将张贴它以后，并将尝试一些标准的Jquery代码我。
这个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
}
});
还有其他选项，比如您想要同步或异步加载图像，以及为每个单独的图像提供完整的事件。
$.fn.preload = function (callback) {
var length = this.length;
var iterator = 0;
return this.each(function () {
var self = this;
var tmp = new Image();
if (callback) tmp.onload = function () {
callback.call(self, 100 * ++iterator / length, iterator === length);
};
tmp.src = this.src;
});
};
用法很简单:
$('img').preload(function(perc, done) {
console.log(this, perc, done);
});
http://jsfiddle.net/yckart/ACbTK/
谢谢你!我想在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，然后预加载所有大图像。
希望这能帮助到一些人。
function preload(imgs) {
$(imgs).each(function(index, value) {
$('<img />').attr('src', value).appendTo('body').css('display', 'none');
});
}
.attr(“src”,值) 不 .attr(“src”,这个)
只是指出一点:)
