0

Web ページを作成し、 load() 関数を使用してページを固定 div にロードしました。しかし、別のリンクを連続してクリックすると、Web ページ全体が応答を停止します。

ページをロードするための私のコードは次のとおりです。

$( document ).ready( function() {  

        $('a').bind('click' , function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#part1' ).load( $( this ).attr( 'href' ) );
        });
    });

上記の load() function のリンクをクリックすると、URLも変更したいと思います。

4

1 に答える 1

0

連続してクリックすると、後ろで実行されている一連の非同期リクエストが追加されます。それらはすべて処理する必要があります。そのため、ブラウザは#part1リクエストが返されるたびにコンテンツを追加してレンダリングします。これが、ページが応答しない理由である可能性があります。

編集

インジケータを表示して、ユーザーが何かを行っていることをユーザーに知らせ、再度ロードを実行しないようにすることができます。次の例は、パーツのロード中にロードを実行しないようにする方法を示しています。

$( document ).ready( function() {  
    var isLoading = false;

    $('a').bind('click' , function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link
        if(!isLoading){
           //start loading
           isLoading = true;
           $( '#part1' ).load( $( this ).attr( 'href' ), function(response, status, xhr) {
               //this is the callback method for success or failure
               //stop loading
               isLoading = false; 
           });
        }
    });
});

インジケーターの表示/非表示を追加するのはそれほど難しくありません。読み込み開始時に表示、読み込み停止時に非表示。

于 2012-08-07T11:21:43.220 に答える