2012-05-08 9 views
1

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

+3

これを行わないでください。それは悪いユーザー体験です。代わりに、[ページの読み込みを高速化する](https://developers.google.com/speed/pagespeed/)の[方法の見出し]をクリックします。 – josh3736

+0

ユーザーはありません。このWebページが行うことになっているのは、失敗したビルドをチェックすることです。それはキオスク上にあり、私のアニメーションが起こると、これが遅延の原因となります。アニメーションは、任意のDivをスクロールするscrollTo関数です。スクロールボックスがある – moutonc

+1

その場合、AJAXを使用してビルドステータスをロードしてみませんか? – josh3736

答えて

2

私はこの仕事をするために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` 
0

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

var loadingTimeout; 

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

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

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

+0

私が下に設定する方法は、基本的にページがロードされているときに、ロードされるまでブロッカーを維持します。ページの読み込みに0.5ミリ秒かかると、表示されません。これは一度に1秒を表示しても動作しますが、100%の時間は動作しない可能性があります。データが遅く読み込まれる可能性があります。 – moutonc

関連する問題