5

jquery load を使用してphpページをコンテンツ領域にロードしています。

ユーザーがナビゲーション メニュー項目を乱用して繰り返しクリックすると、おかしな動作が発生することに気付きました。

現在、私のコードは、コンテンツ ペインを非表示にし、新しいページをロードしてフェード インするだけのシンプルなものです。

 $("#homeLink").click(function(){
    $("#contentPane").hide();
    $("#contentPane").load("welcome.php");
    $("#contentPane").fadeIn();
 });

問題のある動作: 新しいリンクがクリックされると、ペインが前のページにフェード インします (その後、新しいページに更新されます)。

を使用してみ$.ajax({async:false});ましたが、これはすべて持続しました。この時点で、最初のロード コールが完了するまで 2 番目のロード コールをキューに入れないようにする方法について何らかの洞察が得られない限り、URL パラメーターに基づいてさまざまなインクルードを含むようにナビゲーション システムを書き直すことを検討しています。

4

3 に答える 3

8

「完了」コールバックを使用できます。リクエストが完了すると実行されます。

$("#homeLink").click(function() {
    var pane = $("#contentPane");

    pane.hide();
    pane.load("welcome.php", function() {
        pane.fadeIn();
    });
});
于 2012-09-26T08:33:14.593 に答える
1

loadメソッドは、2つの追加パラメーターを取ることができます。クエリ文字列のキーと値のペアのセットと、loadメソッドが成功したか失敗したかに関係なく、loadメソッドが終了したときに実行されるコールバック関数です。これは、コールバック関数を使用して結果を通知する例です。通常、メッセージはメソッドが失敗した場合にのみ表示される可能性がありますが、その仕組みを説明するために、メソッドが失敗した場合にもメッセージを表示します。存在しないファイルを要求することにより、例では失敗することを確認します。

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

ご覧のとおり、コールバック関数は3つのパラメーターを指定し、jQueryがそれらを入力します。呼び出しが成功した場合、最初のパラメーターには結果のコンテンツが含まれます。2番目のパラメータは、「成功」や「エラー」など、呼び出しのステータスを指定する文字列です。これを使用して、呼び出しが成功したかどうかを確認できます。3番目のパラメーターは、AJAX呼び出しを実行するために使用されるXMLHttpRequestオブジェクトです。何がうまくいかなかったか、他の多くのことを確認するために使用できるプロパティが含まれます。あなたの場合、リクエストが完了したときにコールバックを使用してページをロードすることをお勧めします。

于 2012-09-26T08:41:11.587 に答える
1

メソッドを連鎖させることができます：

 $("#homeLink").click(function(){
    $("#contentPane").hide().load('welcome.php', function() {
        $(this).fadeIn();
    });
 });
于 2012-09-26T08:35:17.073 に答える