知道图像何时在 AJAX 响应中完成加载答案

【问题标题】：Know when images are done loading in AJAX response知道图像何时在 AJAX 响应中完成加载
【发布时间】：2010-12-12 02:35:09
【问题描述】：

我有一个 jQuery ajax 函数，可以将一些内容加载到 div 中，其中一些内容是图像。我想说，直到那些刚刚在我的 ajax 中加载的图像完成加载，然后运行一个功能，例如显示内容。这样，我不会将内容加载到 div 中并且图像开始加载。我希望它们被加载，然后将内容或show() 内容放在 div 中。

我已经看到了很多解决方案，例如使用.load()，但它似乎不适用于使用 ajax 加载的内容。

【问题讨论】：

标签： jquery ajax image load preload

【解决方案1】：

这是提供的代码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);
    }                     
});

【讨论】：

我不明白为什么++imagesLoaded 会起作用。 ` .load()` 似乎没有迭代，如果是这样，那么当有多个图像时，$('#someDiv').find('img').load 不会只为第一个图像触发一次吗？
@shenkwen 它的 b/c 加载事件被添加到从 jQuery 选择器返回的每个元素中。如果是多张图片，则将执行多个回调函数，并且由于imagesLoaded var 是在回调之外定义的，因此它将进行迭代。

【解决方案2】：

$("img").load() 不起作用，因为图像是动态加载的；该命令仅适用于当时页面上的图像。

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

【讨论】：

奇数。我要说的是 live 不支持加载——它可能不支持——但是加载事件不会出现在支持或不支持的列表中。你有没有测试过它是否有效？
我试过了： $('#productFull img').live('load', function(){ alert('image loaded!'); });但是，这似乎不起作用。这需要在 ajax 函数的范围内吗？
我没有测试过，如果不在支持列表中，很有可能不支持，因为jQuery很难实现。
看起来“加载”不是 .live docs.jquery.com/Events/live 支持的事件类型

【解决方案3】：

您需要在 AJAX 回调中添加加载处理程序，以便将其应用于通过 AJAX 调用加载的图像。您可能还希望设置一个计时器，以在一段时间后显示内容，以防图像在加载处理程序应用之前加载。

$.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 );
      }
});

【讨论】：

我很难让它工作。遇到一些 js 错误。有人有这方面的例子吗？
这个脚本在我调整后确实对我有用...见下面我的帖子
@bgreater 在此页面上api.jquery.com/load-event 它说“加载”事件“可以停止为已经存在于浏览器缓存中的图像触发”。这有点难以测试，但我想知道如果用户来回点击，那么会有一些图像已经在缓存中，这将使“加载”事件停止触发。这是有问题的，因为我将隐藏新内容直到“加载”事件触发，有什么解决方案吗？