知道当图像加载完成的Ajax响应 [英] Know when images are done loading in AJAX response

问题描述

我有一个jQuery的AJAX功能加载一些内容放到一个div，有些内容是图像。我想说，直到它在那里只是装在我的AJAX这些图片，都是完成加载，然后运行的功能，如显示的内容。这样一来，我不会有内容加载到div和图像开始加载。我希望他们能够被加载，然后把内容或显示（） DIV中的内容。

I have a jQuery ajax function that loads some content into a div, some of the content is images. I would like to said until those images which where just loaded in my ajax, are finished loading, and THEN run a function, such as showing the content. This way, I won't have the content loaded into the div and the images start loading. I want them to be loaded, then put the content, or show() the content in the div.

我已经看到了很多的解决方案，这一点，如使用 .load（），但它似乎并没有工作已使用AJAX加载的内容。

I have seen many solutions to this, such as using .load(), but it does not seem to work for content that has been loaded using ajax.

推荐答案

您需要添加负载处理的AJAX回调，以便把它应用到正在通过AJAX调用加载的图片。您可能还需要有一个计时器设置表现出一定的时间间隔，以防图像被装载负载处理应用之前后的内容。

You need to add the load handler in the AJAX callback in order to have it apply to the images that are being loaded via the AJAX call. You may also want to have a timer set to show the content after some interval in case the images get loaded before the load handler is applied.

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

这篇关于知道当图像加载完成的Ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！