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

您是否想过使用live() 绑定到所有当前和未来的img 元素？

$('img').live('load', function ()
{
    alert("image loaded: "+this.src);
});

更新后，我可以看到您遇到的问题。 live() 在选择器上效果最好，而在 jQuery 包装的元素数组上使用它。像这样使用live() 与使用bind() 没有什么不同。你应该尝试这样的事情：

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

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

Answer 2

我认为您需要将一个函数绑定到全局 ajaxSuccess，然后将加载事件绑定到页面上的每个图像。

$.ajaxSuccess(function(){
 $('img').load(function(){
  //Your code here
 });
});

或者当你期望有很多图片时：

$.ajaxSuccess(function(){
 $('img:not(.loaded)').addClass('.loaded').bind('load',function(){
  //Your code here
 });
});

如果上述任何代码不能正常工作，Tou 可能希望将代码放入回调中，以便在添加 html 后将其添加到站点。在上述函数中使用 setTimeout 也可能有所帮助。

[编辑]

如果您知道要加载多少图像，您可以在服务器端代码中生成图像<img src="something" onload="$.imgHello()" /> 并在每个$.imgHello() 函数调用中增加一些计数器。但这不是我推荐给任何人的解决方案。

Answer 3

在尝试以几乎所有可以想象的方式完成这项任务之后，这个任务终于奏效了，非常感谢 Naugtur 为我指明了正确的方向：

var no_of_images = $('img').size();

$.extend(no_of_images);

if(no_of_images > 0) {

    var images = new Array();
    var i = 0;
    $('img').each( function() {
        images[i] = $(this).attr('src');
        i++;
    });

    i = 0;

    $(images).each( function(){
        var imageObj = new Image();
        imageObj.src = images[i];
        $(imageObj).load( function() {
            no_of_images--;
            i++;
            if(no_of_images == 0){
                functionToPerform();
            }
        });
    });
} else {
    functionToPerform();
}

为了快速解释正在发生的事情，我将使用一个类比。想象每张图片都是您聚会的客人。灯灭了。你打开灯，然后跑到每个客人​​面前，给他们一张纸、一支笔和一部手机，同时计算你把材料分发给了多少人。他们都开始疯狂地画画，然后他们一画完，就会打电话告诉你。对于每一个跟注的人，你都会从你的棋盘上划掉一个计分。当最后一个人给你打电话时（当你的黑板上的计数标记用完时），你告诉他们挂断电话并给披萨店的人打电话。现在是披萨时间。如果一开始没有客人，你自己打电话给比萨人。

如果你在想“他为什么要为每个 $.load() 创建一个 Image() 对象，那么，我尝试采用传统的 jQuery 路线，使用直接的 jQuery 样式选择器而不是图像对象。看起来完全被忽略（导致页面崩溃）。我尝试将Image() 与.onLoad 结合使用，并且在不崩溃页面的情况下起作用，但它没有执行我编写它的功能。

这段代码是独立的，所以我想它可以复制粘贴到任何图像加载应用程序中。它对我来说似乎足够小，以免打扰。 functionToPerform() 基本上充当您希望等待执行的任何功能，直到加载所有图像（在我的情况下，它是整个插件）。涂鸦。

Answer 4

循环遍历图像并调用$('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
      }
   }
});