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

Cross-browser solution for a callback when loading multiple images?

本文关键字：浏览器 解决方案 回调 用于 图像 加载      更新时间：2023-09-26

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

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() {
}
相关文章：