asp.netのローディング画面

Question

私は、この非常に疑問を扱っている多くのスレッドが既に掲載されていることを認識しており、私はそれらの多くを投げ捨てて見て、私の問題にさまざまなアプローチを試みました。残念ながら私は自分の特定の状況で働くことができません。だからここに行く、

私はVisual Studio 2010で働いているC＃とasp.netを使用しています。自分の部門が従業員の指標を追跡するための内部ツールとして、すでにWebサイトを開発しました。プログラムは、ストアドプロシージャを介して中規模のSQLデータベースを打つことによって動作し、次にいくつかのマイナーな計算を行い、ASP：チャート、リピータ、および他のテーブルを含む様々な方法でデータを表示します。プログラムは、ユーザがメトリックを表示したい日付範囲を選択することを可能にする。明らかに範囲が広がるにつれて、ユーザーが経験するハングタイムも増加します。私は、ページがサーバーにポストバックするたびに表示される負荷画面を作成しようとしています。私の最初の考えは、ページロードイベントが発生したときに表示されるローディングGIFでCSSとdivを使用することでしたが、正常に動作するようには見えませんでした。私はjqueryとajaxの多くの例を読んだり見たりしましたが、どちらも経験がありません。私は

$(document).ready(function() { 
$('#loadGif').hide(); 
}); 

<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" /> 

と

document.getElementById("loading").className = "loading-visible"; 
var hideDiv = function() { document.getElementById("loading").className = "loading- invisible"; }; 
var oldLoad = window.onload; 
var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv; 
window.onload = newLoad;  

<div id="loading" class="loading-invisible"> 
<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" /> 
</div> 

およびその他のいくつかのテクニックを試してみました。明らかに、私はこれらのテクニックを適切に使用する方法を理解していません。私が望むのは、ユーザーの要求が処理されていることを知るために、ページがデータをロードしている間にローディング画面を表示することだけです。あなたはこのためにUpdateProgressコントロールを使用することができるはず

 /*--------------------==================LOADING SCREEN=================---------------- -*/ 
    /*this is what we want the div to look like 
    when it is not showing*/ 

    div.loading-invisible 
    { 
    /*make invisible*/ 
    display:none; 
    } 

/*this is what we want the div to look like 
    when it IS showing*/ 
div.loading-visible 
{ 
/*make visible*/ 
display:block; 

/*position it 200px down the screen*/ 
position:absolute; 
top:200px; 
left:0; 
width:100%; 
text-align:center; 

    /*in supporting browsers, make it 
    a little transparent*/ 
    background:#fff; 
    filter: alpha(opacity=75); /* internet explorer */ 
    -khtml-opacity: 0.75;  /* khtml, old safari */ 
-moz-opacity: 0.75;  /* mozilla, netscape */ 
    opacity: 0.75;   /* fx, safari, opera */ 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 

/*---------------- Another loading screen attempt with ajax---------*/ 
#updateProgress 
{ 
background-color:#CF4342; 
color:#fff; 
top:0px; 
right:0px; 
width:100%; 
position:fixed; 
} 

#updateProgress img 
{ 
    vertical-align:middle; 
    margin:2px; 
} 
    /*---------------- Another loading screen attempt with jquery---------*/ 
    div#spinner 
    { 
    display: none; 
    width:100px; 
    height: 100px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    background:url(loading.gif) no-repeat center #fff; 
    text-align:center; 
    padding:10px; 
    font:normal 16px Tahoma, Geneva, sans-serif; 
    border:1px solid #666; 
    margin-left: -50px; 
    margin-top: -50px; 
    z-index:2; 
    overflow: auto; 
} 

Answer 1

：

ここ

<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> 

必要に応じて、あなたが不透明度を調整するために使用することができますスタイル、ですボディコンテンツがロードされたときに表示されないように移動されるプランテキストロードメッセージを含むマスターページコンテンツをフラッシュします。私は確信している最善の方法ではないが、それは私のために働く。

Answer 2

：すべてのヘルプは非常に残念ここ おかげ

をいただければ幸いCSSです。このような何かは正しい方向にあなたを指している必要があります：私は、応答を使用して、私の問題を回避離れた

#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; 
}