ページの読み込みが完了してから表示させるには？

解決済

質問者：ijava
質問日時：2008/03/19 23:34
回答数：1件

画像など全てのロードが完了してからページを表示させる方法はないでしょうか。
ロード中に「now loading」などと表示できたら最高です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： auty
回答日時：2008/03/20 01:54

ロードが完了して発生するイベントにonloadがあります。

方針としては、最初「now loading」のみを表示し、に元々のページ全体を非表示にしておいてonloadイベントで表示させます。

以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('gg0').style.display = 'none';
document.getElementById('gg').style.display = 'block';
}
</script>
<style type="text/css">
#gg {
display: none;
}
</style>
</head>

<body>
<div id="gg0" style="text-align: center">now loading</div>
<div id="gg">
本体
<hr />
<img src='1.jpg' />
</div>
</body>
</html>
------------------------------------------------------------

以下は、このサンプルページでも確認できるよう、ロードが完了後２秒してから表示をしています。
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
window.onload = function() {
setTimeout("show()",2000);
}

function show() {
document.getElementById('gg0').style.display = 'none';
document.getElementById('gg').style.display = 'block';
}
</script>
<style type="text/css">
#gg {
display: none;
}
</style>
</head>

<body>
<div id="gg0" style="text-align: center">now loading</div>
<div id="gg">
本体
<hr />
<img src='1.jpg' />
</div>
</body>
</html>