6

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

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

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

4

4 に答える 4

22

これを行うには多くのアプローチがあります。簡単な方法：

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

ジェームズワイズマンからの提案の後、display：block to show（）を編集しました:)

于 2009-08-20T10:42:21.837 に答える
9

たとえば、もう少し堅牢にするために、を追加するのを忘れています。 

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

htmlに対しては、jQueryでこれを行うこともできます。

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

これにより、divが自動的に追加されます。

onclickボタンイベントでこれを起動するだけです。

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

于 2009-08-20T11:48:37.180 に答える
2

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

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

とを使用するだけ.hide()です。show()メソッド。

これらは、HTM1要素のブラウザのデフォルトのスタイルシート定義を説明しています。画像の「ブロック」を表示したくない場合があります。要素には、さまざまな表示スタイルが存在する可能性があります。

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

于 2009-08-20T10:44:35.607 に答える
0

loadを呼び出した後にloadinggifを表示し、load関数のコールバックを使用して非表示にするメソッドを呼び出すことができます。

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});
于 2009-08-20T10:45:01.550 に答える