我检查了其他问题,但他们都知道如何在加载特定图像时进行回调:
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
处理程序,因为 onload 处理程序可能会立即触发如果图像在缓存中,则设置 .src 值。如果您没有首先设置 onload 处理程序,那么它可能永远不会触发,因为在您设置处理程序时,图像已经加载。这发生在某些浏览器中。如果您需要 onload 事件,请始终在 .src
之前设置 .onload
。
关于javascript - 加载多张图片时回调的跨浏览器解决方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8921783/