jQuery:动态图像处理(等待加载)

Question

我正在尝试编写一个插件，该插件具有内置函数，可以等到页面上的所有图像加载完毕后再执行自身。 $(window).load() 仅在页面初始加载时有效，但如果有人想通过 AJAX 拉取包含图像的 HTML，则它不起作用。

有什么好的方法可以做到这一点并实现它，以便它可以在插件中独立存在吗？我尝试过循环 $('img').complete，我知道这是行不通的(图像永远不会加载，并且浏览器在“脚本需要很长时间才能完成”的情况下崩溃)漏洞)。有关我正在尝试执行的操作的示例，请访问我要放置该插件的页面:

http://www.simplesli.de

如果您转到“更多用途”部分(在导航栏上单击它)，您会发现图像幻灯片无法正确加载。我知道当前的代码不起作用，但它只是保留在我找到答案之前。

编辑:尝试此解决方案，但它不起作用:

if($('.simpleSlide-slide img').size() > 0) {
    var loaded_materials = $('.simpleSlide-slide img').get();
} else {
    var loaded_materials = $('.simpleSlide-slide').get();
}

$(loaded_materials).live('load', function() {
         /* Image processing and loading code */
    });

Answer 1

循环图像并调用 $('img').complete 的问题是浏览器 UI 是单线程的，因此您永远不会给它加载图像的机会，因为它是总是在你的循环中。您可以使用 setTimeout 让浏览器正常工作。例如，

$.get("whatever",function(html) {
   $('#foo').html(html);
   var images = getTheImages();
   function checkImages() {
      var done = true;
      $.each(images,function() {
         done = done && this.complete;
         return done;
      });
      if(done) {
        fireEvent();
      } else {
        setTimeout(checkImages,100); // wait at least 100 ms and check again
      }
   }
});