web-dev-qa-db-ja.com

asp.netページの読み込み中にgifを表示する

長いASP.NETページ読み込みプロセスがあります。

ASP.NETページの読み込み中に読み込みgifを表示する方法はありますか？

当然、ページ自体に画像を使用することはできません。「Loading ...」画像を使用して「ダミーページ」を最初にロードすると、ユーザーを実際のページにリダイレクトするとすぐに、そのページは破棄されます。 。

どんな手掛かり？ありがとう

asp.netimagepreload
13
Didier Levy

これには、次のようにUpdateProgressコントロールを使用できます。

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

半透明にする場合は、次のスタイルを使用できます。

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}
13
James Johnson

私の同様の質問をご覧ください jQueryまたはAJAXを使用した「お待ちください」メッセージ ：

ASPXページがロードされている間、Webブラウザーの現在のページにとどまります。したがって、新しいページが読み込まれていることがわかったとき（つまり、ボタンまたはリンクが押されたとき）、「読み込み中」の画像を表示するだけで、クライアントが「新しい」ページの受信を完了すると自動的に非表示になります（実際のページであるかどうかにかかわらず）新しいページまたは投稿された同じページ）。

送信ボタンがクリックされたときに（divに含まれる）ロード画像を自動的に表示するために使用できるコード例は次のとおりです。

$(':submit').click(function() {
    $('#divLoading').show();
});

または、AjaxツールキットまたはASP.NET 4.0に含まれるUpdatePanelを使用することもできます。読み込み中の画像を自動的に表示するUpdateProgressというコントロールがあります。

編集：

最初のページが読み込まれる前に「読み込み中」の画像を表示する必要があると思います。この場合、マスターページのコンテンツをUpdatePanelにラップして、画像を自動的に表示するプログレスローダーコントロールを使用します（どちらもAjax ToolkitまたはASP.NET 4.0）、およびページの実質的な（非マスターページ）コンテンツをロードしますafterUpdatePanelで初期ページをロードします。

これを行うには、コンテンツページの本文をPanel内に配置し、パネルの表示設定をFalseに設定し、ページの読み込み後にパネルをTrueに設定します。

UpdateProgressコントロールのマークアップは次のとおりです。もちろん、スタイルを設定して、適切な領域に配置する必要があります。

<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
    <ProgressTemplate>
        <div id="theprogress">
            <img src="images/loading.gif" />
            <span>Loading</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

編集：

UpdatePanelおよびUpdateProgressコントロールを使用しない場合は、次の操作を行います。

  1. ページのコンテンツをPanelというpnlContentに配置し、パネルの可視性をFalseに設定します。
  2. imgとロード画像を作成し、visibilityをPanelに設定して、pnlLoadingという名前の別のTrueに配置します。

  3. 読み込まれるとすぐにページを強制的に再読み込みするクライアント側スクリプトを配置します。このスクリプトをpnlLoading内に配置します。 Update：以下の＃3コードをASPXページに挿入してパネルを作成すると、すぐに投稿がトリガーされます。

  4. 次の＃4コードをPage_Loadに追加します。

コード：

＃3の場合]

<asp:Panel runat="server" ID="pnlLoading">
    <!-- Replace "form1" with your form's name. -->
    <script type="text/javascript">form1.submit()</script>
    <img src="images/loading.gif" alt="Loading" />
    <span>Loading</span>
</asp:Panel>

＃4の場合

if (Page.IsPostBack())
{
    pnlLoading.Visible = false;
    pnlContent.Visible = true;
}

これにより、実際のページコンテンツが読み込まれている間、読み込み中の画像が表示されます。

5
Devin Burke

次の解決策は、現在のAjax化やサイト構造に影響を与えることなく、ページナビゲーション間でうまく機能することがわかりました。

スクリプトをno-mans-land betweenのマスターページのヘッドエンドタグとボディスタートタグにドロップするだけです。

これを提供してくれたSubinに感謝します。

http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript

<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
 document.documentElement.style.overflow="hidden";
 var subinsblog=document.createElement("div");
 subinsblog.id="subinsblogldiv";
 var polu=99*99*99999999*999999999;
 subinsblog.style.zIndex=polu;
 subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
 subinsblog.style.backgroundPositionX="50%";
 subinsblog.style.backgroundPositionY="50%";
 subinsblog.style.position="absolute";
 subinsblog.style.right="0px";
 subinsblog.style.left="0px";
 subinsblog.style.top="0px";
 subinsblog.style.bottom="0px";
 if(subinsblogla==0){
  document.documentElement.appendChild(subinsblog);
  subinsblogla=1;
 }
}else if(document.getElementById('subinsblogldiv')!=null){
 document.getElementById('subinsblogldiv').style.display="none";
 document.documentElement.style.overflow="auto";
}
},1000);
</script>

そのような他の変数があり、コードが機能しない可能性があるので、変数名を置き換えないことをお勧めします。ロード画像を変更したい場合は、変数subinsblog.style.backgroundの背景URLを変更してください。

1
user3300006