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

【问题标题】：Cross-browser solution for a callback when loading multiple images?加载多个图像时回调的跨浏览器解决方案？
【发布时间】：2012-01-19 06:09:37
【问题描述】：

我检查了其他问题，但他们都提供了如何在加载特定图像时进行回调的信息：

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

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

感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery image callback loading

【解决方案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);

附：每当使用.onload 处理图像时，您必须在设置.src 值之前设置.onload 处理程序，因为如果图像在缓存中，在设置.src 值时onload 处理程序可能会立即触发。如果您没有先设置 onload 处理程序，那么它可能永远不会触发，因为在您设置处理程序时，图像已经加载。这发生在某些浏览器中。如果您需要 onload 事件，请始终在 .src 之前设置 .onload。

【讨论】：

谢谢，正是我需要的。没有想到在 .src 分配之前移动 onload 处理程序！

【解决方案2】：

这称为引用计数。这是在 n 个任务完成后运行单个回调的标准技术。

var count = 2;
img1.onload = function () {
  count-- === 0 && callback();
}
img2.onload = function () {
  count-- === 0 && callback();
}

function callback() {

}

【讨论】：