(cache) 読み込み中にNow Loading...を表示

IE6以前のブラウザをお使いの方へ

当ブログデザインは、IE6以前のブラウザには対応していません。
できれば、お使いのブラウザを新しいものへ更新してください。
Windows Internet Explorer 8: ホーム

スポンサー広告│--:--│Edit

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

«Prev Entry│Next Entry»

読み込み中にNow Loading...を表示

JavaScript│20:04│Edit

JavaScriptでページ読み込み中に画像等を表示する方法の紹介です。
下の画像のようなものを読み込み中のみ表示させます。
loading_image

読み込み完了時の処理にはJavaScriptのonloadを使用します。
そのonloadで読み込みが完了したとき、JavaScriptからスタイルを指定して非表示にします。

今回はHTML、JavaScript、CSSを利用し作成します。
では早速HTMLに書く内容から書き始めます。
赤字は各々で変更してください。(書いてあるURLに飛べばどんな内容か分かると思います)

HTML

<body onLoad="init()">
<script type="text/javascript">
document.write('<div id="loading" class="loading"><img src="http://blog-imgs-24.fc2.com/e/s/p/esperoporusted/20081116220257.gif" alt="Loading" width="32" height="32" /><br />Now Loading...<\/div>');
document.close();
</script>
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/e/s/p/esperoporusted/loading.js"></script>

2～5行目にかけてJavaScriptが有効の時に表示するhtmlを書いています。
6行目は下記のJavaScriptへのリンクです。

JavaScript

/*ブラウザ毎に対応を変更*/
var ld=(document.all);
var ns4=document.layers;
var ns6=document.all?false:true;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init(){
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}

上記までで読み込み完了で表示が消えます。
最後にCSSで適当なデザインをします。

CSS

.loading {
position: fixed;/*位置を固定*/
top: 50%;/*垂直位置中央*/
left: 50%;/*水平位置中央*/
width: 298px;
height: 151px;
margin-top: -75px;/*中央から上に高さの半分移動*/
margin-left: -149px;/*中央から左に横幅の半分移動*/
padding-top: 50px;/*内容を大体中央に*/
text-align: center;
background: url(http://blog-imgs-24.fc2.com/e/s/p/esperoporusted/loading_bg2.png) no-repeat;
color: #000;
font-family: verdana;
font-size: 12px;
}

上記の方法とは別に、CSSだけを書いて読み込み中のみ表示させることも出来ます。
※JavaScriptが有効でない場合、うまく動作しません。有効でなくても多少は表示されるようです。
IE6,IE7,safari3.1,opera9.6,firefox3.0,sleipnir2.8,lunascape4.8,Google Chrome1.0にてJavaScript有効時動作確認。

HTML

<head>
<style type="text/css"><!--
.loading {
position: fixed;/*位置を固定*/
top: 50%;/*垂直位置中央*/
left: 50%;/*水平位置中央*/
width: 298px;
height: 151px;
margin-top: -75px;/*中央から上に高さの半分移動*/
margin-left: -149px;/*中央から左に横幅の半分移動*/
padding-top: 50px;/*内容を大体中央に*/
text-align: center;/*内容を中央に*/
background: url(http://blog-imgs-24.fc2.com/e/s/p/esperoporusted/loading_bg2.png) no-repeat;
color: #000;
font-family: Verdana;
font-size: 12px;
}
--></style>
</head>
<body>
<div class="loading">
<img height="30" width="30" alt="Loading" src="http://blog-imgs-24.fc2.com/e/s/p/esperoporusted/20081116220257.gif" /><br />
Now Loading...
</div>
～中略～
<style type="text/css"><!--
div.loading{
visibility:hidden;
display:none
}
--></style>
</body>

bodyの一番上から読み込み、一番下まで読み込んだ時に消えます。

注目して欲しいのが、同じクラスに上書きしているところです。
3行目では「.loading{}」、25行目では「div.loading{}」となっていますね。
これは、CSSの優先順位を利用したものです。
ちなみに「div」が余計に付いてる方が優先されています。(詳しくは「CSS 優先順位」等で検索してください)