加载多个图像时回调的跨浏览器解决方案？

Question

我检查了其他问题,但是他们都有关于如何在加载一个特定图像时进行回调的信息:

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';

如何定义类似于第一个示例中的回调,但是当两个图像完成加载时它会被执行？

感谢您的时间.

Answer 1

这是一个函数,它将创建多个图像并在它们全部加载时调用回调:

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);

PS在处理.onload图像时,必须.onload在设置.src值之前设置处理程序,因为如果图像在缓存中,则设置.src值时onload处理程序可能会立即触发.如果您尚未首先设置onload处理程序,那么它可能永远不会触发,因为在您设置处理程序时,图像已经加载.这在某些浏览器中会发生.只是总集.onload之前.src,如果你需要的onload事件.