jquery - 加载图像数组后执行函数

Question

在页面标题图像加载后，我正在执行一个脚本：

objImg = new Image(); 
objImg.src = '/images/header.jpg';
objImg.onload = function() {
   $('#myDiv').fadeIn(500);
}

这很好用。但是，在其中一个页面上，我需要在加载四个图像而不是一个图像后执行它。有没有办法修改它以使其成为一个数组而不仅仅是一个图像？

标签： jqueryarraysimagefunctiononload

Answer 1

我会使用这样的东西。

在您的问题中使用相同的方法..

对于图像数组，给标签一个image-wait-for-load类img说

现在找出您的页面中有多少图像需要等待。

var waitImageCount = $('.image-wait-for-load').length;

检查所有图像是否已加载的代码。

$(document /* or what ever */).on('load', '.image-wait-for-load', function() {
  waitImageCount--; // decrease the counter

  if(waitImageCount === 0) {
    // all images are loaded.
    // Do what ever you like
  }
}); 

请注意，这个未经测试的代码，但我希望这样的东西应该可以工作。