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