ページの読み込み中にajaxの読み込みGIFアニメーションを表示するには？

Question

私は自分のウェブサイトにAJAXを実装しようとしています。 div changepassの内容がクリックされると、changepass.template.phpがロードされます。ここではそのために使用しているコードです。

$(function() { 
    $(".changepass").click(function() { 
    $(".block1").load("views/changepass.template.php"); 
    return false; 
}); 

私の質問は、changepass.template.phpページが完全に読み込まれている間にGIFアニメーション（loading.gif）を表示する方法です。コードのヒントを教えてください。

Answer 1

これを実行する方法はたくさんあります。行うための 簡単な方法：

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

JS：

$(function() { 
    $(".changepass").click(function() { 
     $("#dvloader").show(); 
     $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); 
     return false; 
    }); 
}); 

編集表示：ブロックにショー（）ジェームズワイズマンからの提案の後に:)

Answer 2

むしろそのスタイルを設定する

.css("display", "block"); 

.hide()とを使用してください。方法。

これらは、HTMl要素のブラウザのデフォルトのスタイルシート定義を考慮しています。イメージの「ブロック」を表示したくない場合があります。要素の異なる可能な表示スタイルの負荷が存在することができます：

http://www.w3schools.com/htmldom/prop_style_display.asp

Answer 3

あなたは負荷を呼び出した後、ローディングGIFを表示するには、いくつかのメソッドを呼び出し、ロード機能でコールバックを使用して、それを隠すことができます。

$(function() { 
    $(".changepass").click(function() { 
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){ 
      $("#gifImage").hide(); 
    }); 
    return false; 
}); 

Answer 4

それは少しより堅牢に、例えば、あなたがHTMLに

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

を追加することを忘れするには、あなたはまた、jQueryの中で何かを行うことができますlike：

var container = $.create('div', {'id':'dvloader'}); 
var image = $.create('img', {'src':'loading.gif'}); 
container.append($(image)); 
$("body").append($(container)); 

自動的にdivを追加します。

これをonclickボタンイベントで起動してください。

エラーが発生しにくくなりました。