我检查了其他问题,但它们都有关于如何在加载一个特定图像时进行回调的信息:
var img = new Image();
img.src = "images/img.png";
if (!img.complete) {
img.onload = function() {
// code to be executed when the image loads
}
}
或者进行简单的检查,查看是否所有图像都加载了"if"语句。此外,$(window).load(或onLoad或其他)也不起作用。
在我的情况下,我正在加载两个图像:
var img1 = new Image();
var img2 = new Image();
img1.src = 'images/img1.png';
img2.src = 'images/img2.png';
我如何定义一个类似于第一个例子中的回调,但当两个图像都完成加载时就会执行它?
谢谢你抽出时间。
这里有一个函数,它将创建多个图像,并在它们全部加载时调用回调:
function createImages(srcs, fn) {
var imgs = [], img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
imgs.push(img);
img.onload = function() {
--remaining;
if (remaining == 0) {
fn(srcs);
}
};
img.src = srcs[i];
}
return(imgs);
}
var imgs = createImages(['images/img1.png', 'images/img2.png'], myCallback);
请注意,无论何时使用图像的.onload
,都必须在设置.src
值之前设置.onload
处理程序,因为如果图像在缓存中,则在设置.src值时,onload处理程序可能会立即启动。如果您没有先设置onload处理程序,那么它可能永远不会激发,因为在设置处理程序时,图像已经加载。这种情况在某些浏览器中发生。如果您需要onload事件,请始终将.onload
设置在.src
之前。
这叫做引用计数。这是在n个任务完成后运行单个回调的标准技术。
var count = 2;
img1.onload = function () {
count-- === 0 && callback();
}
img2.onload = function () {
count-- === 0 && callback();
}
function callback() {
}