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

Question

可能重复：
jQuery Ajax 等到所有图像都加载完毕

我想在显示之前先在我的 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;
}