jqueryでプロセスが発生しているときに読み込みイメージを表示する方法

Question

次のコードに「読み込み」イメージを追加するにはどうすればよいですか？ここに私が意味することがあります。このコードにボタンを追加し、ユーザーがそれをクリックするとPHPファイルのコンテンツは、 "通知"というIDでdivにロードされますが、PHPファイルが処理されている間は、読み込み中の画像を表示したいと思います。 、

は、ID loadingImgとdiv要素を作成しますが、あなたの読み込みGIFを置く：uはこのようにそれを達成することができます

 
var $loader = $('<div />').attr('id', 'loader'); 
var $spinner = $('<img />').attr('src', 'ajax-loader.gif') 
    .attr('alt', 'Loading'); 
$loader.append($spinner); 
$('body').children().last().after($loader); 
$('body').ajaxStart(function() { 
     $loader.show(); 
    }).ajaxComplete(function() { 
     $loader.hide(); 
    }); 

Answer 1

を画像を取得します jQueryの.ajaxStartを使用すると、ajaxリクエストの開始を検出できます。 プリロードイメージをフェードインし、関数が成功を返した場合はフェードアウトします。

すべての要素に.ajaxStartイベントをアタッチできます。プリロードイメージコンテナを使用してもう少し目立つようにします。

.ajaxStart() documentation

function onSuccess(data, status) { 
    data = $.trim(data); 
    $('#loadingImg').fadeOut(); 
    $("#notification").html(data); 
} 

function onError(data, status) { 
    // handle an error 
}   

$(document).ready(function() { 
    $("#submit").click(function(){ 

     var formData = $("#expander").serialize(); 

     $('#loadingImg').ajaxStart(function(){ 
      $(this).fadeIn(); 
     }); 

     $.ajax({ 
      type: "GET", 
      url: "grab.php", 
      cache: false, 
      data: formData, 
      success: onSuccess, 
      error: onError 
     }); 
     return false; 
    }); 
}); 

Answer 2

を：私はこのような何か、このウェブサイトからhttp://www.ajaxload.info/

function onSuccess(data, status) { 
    data = $.trim(data); 
    $("#notification").html(data); 
} 

function onError(data, status) { 
    // handle an error 
}   

$(document).ready(function() { 
    $("#submit").click(function(){ 

     var formData = $("#expander").serialize(); 

     $.ajax({ 
      type: "GET", 
      url: "grab.php", 
      cache: false, 
      data: formData, 
      success: onSuccess, 
      error: onError 
     }); 
     return false; 
    }); 
});