知道在AJAX响应中图片何时加载完成

Question

我有一个jQuery的ajax函数，它将一些内容加载到一个div中，其中一些内容是图像。我想要在这些刚刚加载进来的图片完成加载之前暂停执行，然后再运行一个函数，比如展示这些内容。这样做的好处是，我不会让内容加载到div中后才开始加载图片。我希望它们先被加载，然后再把内容放入div中，或者使用show()函数显示内容。

我看到了许多解决方案，例如使用.load()函数，但似乎对于使用ajax加载的内容无效。

- Nic Hubbard

Answer 1

为了使加载通过 AJAX 调用的图像应用到 load 处理程序，您需要在 AJAX 回调中添加 load 处理程序。您可能还想设置一个定时器，在一定时间间隔后显示内容，以防图像在应用 load 处理程序之前被加载。

$.ajax({
     ...
     success: function(data) {
          var imageCount = $(data).filter('img').length;
          var imagesLoaded = 0;
          $(data).hide()
                 .appendTo('#someDiv')
                 .filter('img')
                 .load( function() {
                     ++imagesLoaded;
                     if (imagesLoaded >= imageCount) {
                        $('#someDiv').children().show();
                     }
                  });
          setTimeout( function() { $('#someDiv').children().show() }, 5000 );
      }
});

- tvanfosson

---

我在努力让它工作。出现了一些 JS 错误。有人有这方面的例子吗？ - Nic Hubbard

这个脚本在我调整了一下之后对我起作用了...请看我的帖子。 - bgreater

在这个页面http://api.jquery.com/load-event/上，它说'load'事件“对于已经存在于浏览器缓存中的图像可能会停止触发”。这有点难以测试，但我想知道如果用户来回点击，那么就会有一些已经在缓存中的图像，这将使'load'事件停止触发。这是有问题的，因为我要隐藏新内容，直到'load'事件触发，有什么解决方法吗？ - shenkwen

Answer 2

这是代码tvanfosson提供的更新版本。

您必须确保imageCount变量计算的是节点列表而不是字符串，因为我可以推断出这是原始代码中的问题：

$.ajax({
    url      : 'somePage.html',  
    dataType : "html",
    success  : function(data) {

        $(data).hide().appendTo('#someDiv');

        var imagesCount = $('#someDiv').find('img').length;
        var imagesLoaded = 0;

        $('#someDiv').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#someDiv').children().show();
            }
        });

        var timeout = setTimeout(function() {
            $('#someDiv').children().show();
        }, 5000);
    }                     
});

- bgreater

---

我不明白为什么 ++imagesLoaded 会起作用。.load() 似乎没有迭代的功能，如果有的话，那么当有多张图片时，$('#someDiv').find('img').load 只会对第一张图片触发一次吗？ - shenkwen

@shenkwen 这是因为在从jQuery选择器返回的每个元素中都添加了一个加载事件。如果这是多个图像，则将执行多个回调函数，由于imagesLoaded变量在回调之外定义，因此它将进行迭代。 - bgreater

Answer 3

$("img").load()无法正常工作，因为图像是动态加载的；该命令只适用于当前页面上存在的图像。

使用$("img").live("load")来跟踪图像何时被加载。

- mahemoff

---

奇怪，我想说live不支持load事件 - 也许它确实不支持 - 但是在支持和不支持列表中都没有看到load事件。你测试过它是否能够工作吗？ - tvanfosson

我尝试了：$('#productFull img').live('load', function(){ alert('图片已加载！');
}); 但是，似乎没有起作用。这个需要放在ajax函数的范围内吗？ - Nic Hubbard

我还没有测试过它，如果它不在支持列表上，那么很可能它不被支持，因为这对于jQuery的实现来说会很困难。 - mahemoff

看起来"load"不是.live的支持事件类型。http://docs.jquery.com/Events/live - Nic Hubbard