ページが完全にロードされるまでページを非表示にするプログレスバー

Question

私のウェブページは、完全にロードするのに約5秒〜3秒かかります。ページが読み込まれるまでオーバーレイを表示する方法があるかどうかは疑問でした。ページの読み込みが完了したら、このオーバーレイを非表示にします。プログレスバーや.gifのようなもの。私はMVC3で剃刀エンジンを使用しています。

Answer 1

私はこの仕事をするために3つのことをしました：PS、このすべてに新しいコードブロックが残念です。

HTML本部：

<div id ="blocker"> 
<div>Loading...</div></div> 

CSS：

#blocker{position: fixed; 


top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #000; 
z-index: 1000; 
opacity: 0.3; 
display: none; 

}

#blocker div 
    { position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 5em; 
    height: 2em; 
    margin: -1em 0 0 -2.5em; 
    color: #fff; 
    font-weight: bold; 
} 

jQueryのAjaxが呼び出される前に：

$("#blocker").show();

私は何

$.ajax` 

Answer 2

がある：あなたのページで行われたすべてのajaxcallで

var loadingTimeout; 

$j('body').ajaxStart(function() { 
    loadingTimeout= setTimeout(function() { 
     $("#blocker").show(); 
    }, 1000); 
}); 

$j('body').ajaxStop(function() { 
    clearTimeout(loadingTimeout); 
    $("#blocker").hide(); 
}); 

、あなたのブロッカーは、1秒後に表示されます。クライアントが共鳴を取得すると、ブロックは再び非表示になります。あなたはどう思いますか？