我正在寻找一个快速和简单的方法，预加载图像与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插件在那里做这个，但他们似乎都有点大(大小);我只需要一个快速，简单和短的方式预加载图像!
当前回答
使用JavaScript图像对象。
这个函数允许你在加载所有图片时触发一个回调。但是，请注意，如果至少有一个资源没有加载，它将永远不会触发回调。这可以通过实现onerror回调和增加加载值或处理错误来轻松修复。
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');
});
其他回答
这一行jQuery代码创建(并加载)一个DOM元素img，但没有显示它:
$('<img src="img/1.jpg"/>');
即使在IE9中，这也适用于我:
$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });
我想用谷歌地图API自定义覆盖来做到这一点。他们的示例代码简单地使用JS插入IMG元素，并显示图像占位符框，直到图像被加载。我在这里找到了一个适合我的答案:https://stackoverflow.com/a/10863680/2095698。
$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});
这将像前面建议的那样预加载图像，然后在加载img URL后使用处理程序追加img对象。jQuery的文档警告说，缓存的图像不能很好地与这个事件/处理程序代码一起工作，但它在FireFox和Chrome中为我工作，我不必担心IE。
用jQuery预加载图像并获得回调函数的一个快速、无插件的方法是一次性创建多个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. */
});
注意，如果你想支持IE7，你需要使用这个稍微不那么漂亮的版本(它也适用于其他浏览器):
function preload(files, cb) {
var len = files.length;
$($.map(files, function(f) {
return '<img src="'+f+'" />';
}).join('')).load(function () {
if(--len===0) {
cb();
}
});
}
我会使用Manifest文件告诉(现代)网络浏览器也加载所有相关图像并缓存它们。使用Grunt和Grunt -manifest自动完成这个任务，再也不用担心预加载脚本、缓存失效器、CDN等问题。
https://github.com/gunta/grunt-manifest
