我正在寻找一种快速简便的方法来使用 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();
这是第一个响应的调整版本，它实际上将图像加载到 DOM 中并默认隐藏它。
function preload(arrayOfImages) {
$(arrayOfImages).each(function () {
$('<img />').attr('src',this).appendTo('body').css('display','none');
});
}
使用 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');
});
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
});
});
希望这可以帮助从 Google 访问此页面的人（就像我一样）寻找在 Ajax 调用中预加载图像的解决方案。
这一行 jQuery 代码创建（并加载）了一个 DOM 元素 img 而不显示它：
$('<img src="img/1.jpg"/>');