php - ドキュメントをプリロードし、ブラウザがサーバーからのデータのロードを終了したときにのみ画面に表示する方法

Question

すべてのドキュメント、DOM、画像、AJAX の呼び出し、オブジェクト、およびその他のものの読み込みが完了したときに、すべてを同時に画面に表示する方法はありますか?

これは、ブラウザがサーバーから情報を取得する際に「部分的に」表示するのではなく、.

どんな解決策も役に立ちます。

Answer 1

display:none;jQuery AJAXsuccess()メソッドが起動するまで、すべてを に設定します。これにより、displayプロパティを通常の状態に戻すことができます。

また、AJAX コードがwindow.onloador$(window).on('load')ハンドラ内にあることを確認してください。

これの欠点は、Ajax 呼び出しが失敗した場合、ページが表示されないことです。そのためerror()、jQuery で Ajax メソッドも定義する必要があります。

編集：

読み込みが完了したときに画像を表示する場合 (onload の外に置く):

$('img').each(function()
{
    $(this).css('display','none');
    $(this).on('load',function(){$(this).css('display','');});
});

また、ユーザー エクスペリエンスを向上させるために、何らかの種類の読み込み記号を表示する必要があります。

Answer 2

このソースは Web ページのコンテンツを優先してロードするで見つかりました。彼は、ページを表示する前にページ全体をプリロードすると主張しています。

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
}
window.onload = loadImages;
//  End -->
</script>
<div id="hidepage" style=" background-color: #FFFFCC; layer-background-color: #FFFFCC;     width: 100%;">
<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div>

私の解決策：

これはやり方の大まかな案ですが、完成させればうまくいきます。すべてがロードされる順序に優先順位を付けます。onload jsHide 関数を使用します。

<DIV ID="idElement2"><IMG SRC="Airplane.gif">         onLoad="javascript:jsHide('idElement2');return true"></DIV>


<DIV ID="idElement5"><IMG SRC="stuff.gif"      onLoad="javascript:jsShow('idElement5');jsShow('idElement3');jsShow('idElement4');return true"></DIV>

idelement5 を最後にロードするように設定すると、ロード時に他のすべての要素 ID が表示されます。

Answer 3

このプラグインのようなオーバーレイでページを非表示にすることができ ます

早くて簡単。

Answer 4

window.onload = function () { 
    alert("Page loaded!") 
}