我正在寻找一种快速简单的方法来使用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();
$('<img />') 只是在内存中创建了一个图像元素（请参见链接）。看起来 '$('<img src="' + this + '" />')' 会在隐藏的 DIV 中创建元素，因为它更加 "复杂"。然而，我不认为大多数浏览器需要这样做。 - JoshNaro$.preload(['img1.jpg', 'img2.jpg'])？ - alex$(window).load(function(){/*preload here*/}); 中调用此函数，因为这样文档中的所有图像都会首先加载，很可能它们是首先需要的。 - Jasper Kennissrc之前先设置load事件可能会更安全一些，以防图片在设置load事件之前就已经加载完成了。可以使用以下代码：$('<img/>').load(function() { /* it's loaded! */ }).attr('src', this); - sparebytes这是第一个回答的修改版本，它实际上将图片加载到DOM中并默认隐藏。
function preload(arrayOfImages) {
$(arrayOfImages).each(function () {
$('<img />').attr('src',this).appendTo('body').css('display','none');
});
}
hide()比css（'display'，'none'）更加简洁。 - alex使用JavaScript Image对象。
该函数允许您在加载所有图片后触发回调。但是，请注意，如果至少有一个资源未加载，则它将永远不会触发回调。可以通过实现onerror回调并递增loaded值或处理错误轻松解决此问题。
var preloadPictures = function(pictureUrls, callback) {
var i,
j,
loaded = 0;
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback();
}
};
// Use the following callback methods to debug
// in case of an unexpected behavior.
img.onerror = function () {};
img.onabort = function () {};
img.src = src;
} (new Image(), pictureUrls[i]));
}
};
preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
console.log('a');
});
preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
console.log('b');
});
for 循环体？ - Greg0ryJP，经过检查你的解决方案后，在使用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
});
});
checklist = this.length
在onload函数中：checklist--
然后：if (checklist == 0) callback(); - MiniGod.attr({ src: this }).load(function() {...}) 应该改为 .load(function() {...}).attr({ src: this })，否则会出现缓存问题。 - Kevin B这一行 jQuery 代码可以创建（并加载）一个 DOM 元素 img，但不会显示它：
$('<img src="img/1.jpg"/>');
$.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);
});
我有一个小插件可以处理这个问题。
它叫做 waitForImages，它可以处理 img 元素或者在 CSS 中引用的任何带有图片的元素，例如： div { background: url(img.png) }。
如果您只是想加载 所有 图片，包括 CSS 中引用的图片，那么下面是如何实现的 :)
$('body').waitForImages({
waitForAll: true,
finished: function() {
// All images have loaded.
}
});
:visible 添加到自定义选择器即可。 - alex这个 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
}
});
还有其他选项，例如您想同步或异步加载图像以及为每个单独的图像提供完整事件。
allcomplete回调在DOM准备就绪后执行。图片完成加载的可能性很大是在DOM准备就绪之后，但没有理由去假设。我不知道为什么你认为回调函数是神奇的并且在DOM准备就绪后执行...你能解释一下你是从哪里得到这个想法的吗？仅仅因为图片加载完毕并不意味着DOM已经准备就绪。 - IanNB要将其用作图像预加载器，只需将您的$(document).ready(function(){});放入“allcomplete”事件中：>简单！...它直接推荐了这个答案所展示的内容。 - Ian您可以使用CSS的display:none;规则在HTML中某个位置加载图像，然后使用JS或jQuery在需要时显示它们。
不要使用JS或jQuery函数进行预加载，只需使用CSS规则即可，这比执行许多行JS更简单。
示例：Html
<img src="someimg.png" class="hide" alt=""/>
CSS：
.hide{
display:none;
}
jQuery：
//if want to show img
$('.hide').show();
//if want to hide
$('.hide').hide();
使用 jQuery/JavaScript 预加载图像并不好，因为图像需要几毫秒才能在页面中加载，而您只有几毫秒来解析和执行脚本，特别是当它们是大型图像时，因此在 hml 中隐藏它们更好，也会提高性能，因为图像真正预加载而且根本不可见，直到您显示它们！
img标签，并计算响应次数，例如：function preload(files, cb) {
var len = files.length;
$(files.map(function(f) {
return '<img src="'+f+'" />';
}).join('')).load(function () {
if(--len===0) {
cb();
}
});
}
preload(["one.jpg", "two.png", "three.png"], function() {
/* Code here is called once all files are loaded. */
});
function preload(files, cb) {
var len = files.length;
$($.map(files, function(f) {
return '<img src="'+f+'" />';
}).join('')).load(function () {
if(--len===0) {
cb();
}
});
}