ディスプレイAjaxを読み込んでいるページに画像を読み込む

Question

ボタンをクリックすると、データベースが更新され、結果がupload.phpに基づいてページに表示されます（このセクションはうまくいきますこれで問題はありません。））

<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" style="text-decoration:none"> 

<kk><!--show updated columns information here--></kk> 

$(document).ready(function() { 
$("BB").click(function() { 
    var Id = jQuery(this).attr("id"); 
    $.ajax({ 
     type: 'POST', 
     data: { 
      'modal_id' : Id, 
     }, 
     url : "upload.php", 
     success: function(response) { 
      if(response) { 
       $('kk').append(response); 
       $('#modal_'+Id).modal('show'); 
       $(document).on('hidden.bs.modal', modal_id, function (event) { 
        $(this).remove(); 
       }); 
      } else { 
       alert('Error'); 
      } 
     } 
    }); 
}); 
}); 

私はupload.phpが処理中である、とページがロードされたら、その後、ローディング画像が消えたことになり、私の結果がなるときのローディング画像を追加したいです表示されます。

ページの読み込み中に上記のJavaScriptに画像を追加するにはどうすればよいですか？

Answer 1

スタイル表示するための特別なクラスを作成します。私はクラスactiveと呼んだ。クリックすると、ローダーが表示され、完了すると非表示になります。要求が失敗する可能性があるので、complete -Callbackを使用してください。

<div id="loader"></div> 

$("BB").click(function() { 
var Id = jQuery(this).attr("id"); 
$('#loader').addClass('active'); 
$.ajax({ 
    type: 'POST', 
    data: { 
     'modal_id' : Id, 
    }, 
    url : "upload.php", 
    success: function(response) { 
     if(response) { 
      $('kk').append(response); 
      $('#modal_'+Id).modal('show'); 
      $(document).on('hidden.bs.modal', modal_id, function (event) { 
       $(this).remove(); 
      }); 
     } else { 
      alert('Error'); 
     } 
    }, 
    complete: function() { 
     $('#loader').removeClass('active'); 
    } 
}); 
});