jQuery和ajax：在显示之前等待图像先加载？

Question

  

可能重复：
  jQuery Ajax wait until all images are loaded

我希望在显示之前首先在我的ajax调用中加载我的图像。我该怎么做？

$.ajax({
   url: 'ajax.php',
   type: 'post',
   data:  "q="+query,
   success: function(data) {

     $('.show').html(data).fadeIn('fast');

   }
});

我希望有一个干净的淡入淡出我的ajax但现在它立刻显示出来并且我的文本已完全加载但我的图像加载缓慢并从页面顶部加载到底页。

理想情况下，当我的图像在后台加载时，我想显示一个加载符号，然后有一个干净的淡入淡出。

谢谢！

Answer 1

向图像加载和错误事件添加事件侦听器以计算加载的图像事件

success: function(data) {
    var count = 0;
    var images = $('.show').html(data).find('img').on('load', function(){
        count++;
        if (count == images){
            $('.show').fadeIn('fast');
        }
    }).on('error', function(){
        count++;
        if (count == images){
            $('.show').fadeIn('fast');
        }
    }).length;
}