我检查了其他问题,但它们都包含如何在加载一张特定图像时进行回调的信息:
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
对于图像,您必须设置.onload
设置之前的处理程序.src
值,因为如果图像位于缓存中,则设置 .src 值时 onload 处理程序可能会立即触发。如果您没有先设置 onload 处理程序,那么它可能永远不会触发,因为当您设置处理程序时,图像已经加载。在某些浏览器中会发生这种情况。只是总是设置.onload
before .src
如果您需要 onload 事件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)