0

ロード画面プラグインを作成しました。シナリオは、ajaxローディングを使用してページナビゲーションを行っていることです。したがって、ajaxを使用してページをロードする前に、コードを使用してロード画面を表示し$('body).loadingMask('show')、ページが完全にロードされたら、コードを使用してロード画面を削除します$('body').loadingMask('hide)。

問題は、プラグイン内のターゲットdom要素の取得に多少の遅延があることです。

これはコードの一般的な構造です

$('body').loadingMask('show');
$.ajax({
url : 'views/next.html',
    async : false,
success : function(content, textStatus, jqXHR) {
$('body').append(content);
},
error : function(content, textStatus, jqXHR) {
throw "Unable to load template. Please check the path and name of the template"
}
});
$('body').loadingMask('hide');

問題は、loadingMaskプラグインのshow関数内で、ターゲットのdom要素（つまりbody）の取得に遅延が発生することです。したがって、実際には、コード$('body).loadingMask('show')はajaxページの読み込みが完了した後にのみ実行されます。

それを機能させるために、私は時間遅延を追加しました。これはうまくいくようです。

これは変更されたコードです

$('body').loadingMask('show');
setTimeout(function(){
$.ajax({
url : 'views/next.html',
    async : false,
success : function(content, textStatus, jqXHR) {
$('body').append(content);
},
error : function(content, textStatus, jqXHR) {
throw "Unable to load template. Please check the path and name of the template"
}
});
},500);
$('body').loadingMask('hide');

これで、ページの読み込み中に読み込み画面が表示されます。

4

1 に答える 1

1

削除するasync:falseと、コンテンツが追加された直後に、ajaxの成功でプラグインを呼び出すことができます。

async:false非推奨になり、予期しない問題が発生することがよくあります

$('body').loadingMask('show');
$.ajax({
    url: 'views/next.html',
    success: function(content, textStatus, jqXHR) {
        $('body').append(content).loadingMask('hide');
    },
    error: function(content, textStatus, jqXHR) {
           /* likely need to remove maske here and add something to content to advise user*/
        throw "Unable to load template. Please check the path and name of the template"
    }
});
于 2012-11-05T05:56:00.643 に答える