spinner.gif 2回目以降のajaxでの読み込み

Question

成功はclickイベントでコミットされる前にGIFイメージを読み込もうとしていますが、画像は2回目または3回目以降のクリックでのみ読み込まれますが、初めては読み込まれません。何故ですか？私はbeforeSend（）を使って試してみた&も、ajax呼び出し（$ .ajax関数の前に置く）の前に画像をロードしようとしました。同じことが起こっています。 Success（）は期待どおりに動作します。 jsコードは

$('.gal').on('click', function(){ 
//$(‘#gallery').prepend('<img src="http://127.0.0.1:8887/img/spinner.gif" class="spinner">');//load img 
    $.ajax({ 
     url:"http://127.0.0.1:8887/image gallery.html", 
     beforeSend:function(){ 
     $('#gallery').prepend('<img src="http://127.0.0.1:8887/img/spinner.gif" class="spinner">');//load img 
     },success:function(response){ 
      setTimeout(function(){ 
       $('.container').append($(response)).slideDown(); 
       $('html, body').animate({scrollTop:$('#gallery').position().top},500); 
      },2200); 
        }, 
     complete:function(){ 
      setTimeout(function(){ 
       $('#gallery').children('img:first-of-type').remove(); 
      },2000);}}); 
}); 

ここには何がありますか？ご提案ください。

Answer 1

は$を試してみてください（ 'GAL '）。最初の（）。（{}）で、その後、あなたのonclickイベント

Answer 2

$('#gallery').append('<img id="my_spinner" src="http://127.0.0.1:8887/img/spinner.gif">');> 
$('#my_spinner').on('load', function(){ 
    $.ajax({ 
     //..............load data 
    }); 
    $('#my_spinner').remove(); 
});