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

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

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进行映像时，必须在设置.src值之前设置.onload处理程序，因为如果映像位于缓存中，则在设置.src值时可能会立即触发onload处理程序。 如果您尚未首先设置onload处理程序，那么它可能永远不会触发，因为在您设置处理程序时，图像已经加载。 这在某些浏览器中会发生。 如果需要onload事件，只需在.onload之前设置.onload .src 。

Answer 2

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

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