2

ページの読み込み中に読み込み中のメッセージや画像を表示するにはどうすればよいですか？

たとえば、アイテムを追加するためのボタンをクリックすると、読み込みが完了するまでに時間がかかりますが、読み込み中はページがアクティブになります。私が欲しいのは、ページの中央に小さなローダーが表示され、そのページが非アクティブになることです。ページの読み込みが完了すると、ローダーがなくなり、ページがアクティブになります。

4

3 に答える 3

1

ASP.NETWebフォームを使用していると仮定します

UpdatePanelコントロールに関連付けられたものを簡単に使用できますUpdateProgress。

UpdatePanelを使用すると、非同期を使用してサーバーと対話できます。UpdateProgressコントロールを追加し、それをUpdatePanelとリンクして、読み込みの進行中に何か（Gif、Text、..）を表示することができます。

詳細については、こちらをご覧ください

Asp.net MVCを使用している場合は、このSOの質問のようにAjaxを使用して同じトリックを実行する必要があります。

于 2013-01-22T14:05:21.750 に答える
0

これは私が試したものです。これにはYUIを使用し、ボタンがクリックされたときにコードにパネルを追加しました。

var ANIM_LOAD = YAHOO.namespace("anim_load");
ON button_onClick()
{
StartInitialLoadingPanel("Loading");
}
StartInitialLoadingPanel(msgStrng)
{
if (!TAB_COLLECTION.wait) {

        // Initialize the temporary Panel to display while waiting for external content to load
        TAB_COLLECTION.wait = new YAHOO.widget.Panel("wait",  
                                                                { width: "400px",
                                                                  x: window.screen.center,
                                                                  fixedcenter: true, 
                                                                  close: false, 
                                                                  draggable: false, 
                                                                  zindex:1000,
                                                                  modal: true,
                                                                  visible: true
                                                                } 
                                                              );

        TAB_COLLECTION.wait.setHeader(msgStr);

        TAB_COLLECTION.wait.setBody("<img src='../Images/loading_animation'>");

        TAB_COLLECTION.wait.render(document.body);
    }

    // Show the Panel
    TAB_COLLECTION.wait.show();
}

背景が正常に実行されたら、アニメーションを停止するためのメソッドを次のように呼び出すことができます。

function CancelInitialLoadPanel()
{
    //Hide the Panel    
    if (TAB_COLLECTION.wait) 
    {
        TAB_COLLECTION.wait.hide();
    }
}

あなたがここで見ることができるより多くの詳細をありがとう

于 2013-01-24T09:06:47.010 に答える
0

同様の問題の2つのリンクがあります。ページ全体をレンダリングするのにかかる期間を管理する方法がわかりませんが、これは始まりかもしれません。

ページの読み込みを非表示にする

ページ全体の読み込みプロセスを非表示にするためのページ読み込みアニメーションは、フェードアウトする必要があるずっと前に終了します

これは、ページのレンダリング中にタイマーコントロール DisplayAjaxLoaderを使用するものです

$(document).ready(function(){
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
$(window).load(function(){ 
    $('#loading').fadeOut(600, function(){
        $("#wrap").fadeIn(1000);
        $("#footer").fadeIn(1000);
    });
});
于 2013-01-24T09:11:32.583 に答える