Question

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

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

Answer 1

您需要在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 );
      }
});

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

Answer 3

$("img").load()无效，因为图片是动态加载的;该命令仅适用于当时页面上的图像。

使用$("img").live("load")跟踪图片的加载时间。

知道何时在AJAX响应中加载图像

3 个答案: