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

Question

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

我已经看到了许多解决方案，例如using .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 );
      }
});