こんにちは！
当ブログを訪れた方は、お分かりだと思いますが、当ブログは表示速度が遅いです。速度改善のために、いくつか施策をしてきたのですが、いまだにブログの表示は遅いままです。仕方ないので、ごまかしも込めて「jquery」でページを開くごとにローディングがでてくるようにしたいと思います。
↓こんな感じのローディングです(当ブログでも実装していましたが、サーバーを移転してから外しました)。
今までは、「Flash」でローディングを設置したことがありますが、「jquery」では初めてです。「jquery」でそんなことまで、できるようになったんですね。時の流れを感じます。
ローディングを実装したからといって、根本的な改善にはなりませんが、「サイトを訪問してくれた方のストレスを少しでも減らせるかな」と浅はかな考えでローディングを設置します。しばらく私の浅はかな考えにお付き合いください。
設置手順！
htmlへの設定！
↓htmlへ以下のコードを記述してください。
<body> <div id="loading"><img src="loading.gif" alt="Loading..."></div> <div id="fade"></div> <div id="page"> この部分にページのコンテンツが入ります。 </div> </body>
「<div id=”loading”>」「<div id=”fade”>」の部分がページのデータが読み込まれるまでに表示される箇所になります。
CSSの設定！
↓以下のCSSコードを記述してください。
#loading {
position: absolute;
left: 50%;
top: 35%;
margin-left: -30px;
}
#fade {
width: 100%;
height: 100%;
display: none;
position: absolute;
background: #ffffff;
top: 0px;
left: 0px;
z-index: 50;
}
「#loading」の「left」「top」「margin-left」でローディング画像の位置を設定しています。上記のCSSを別ファイルとして読み込むことも可能です(デモページでは別ファイル「loading.css」にしています)。
jsの設定！
↓以下のjsのコードを
内に記述してください。
$('head').append(
''
);
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
var pageH = $("#page").height();
$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loading").delay(600).fadeOut(300);
$("#page").css("display", "block");
});
上記のjsを別ファイルとして読み込むことも可能です(デモページでは別ファイル「loading.js」にしています)。
上記をまとめると！
↓上記の「html」「CSS」「js」をまとめると以下のようになります。「jquery.min.js」が必ず必要ですので、ご注意ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Loadingサンプル</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$('head').append(
'<style type="text/css">#page { display: none; } #fade, #loading { display: block; }</style>'
);
jQuery.event.add(window,"load",function() { //全てのデータが読み込まれた後にに呼ばれる関数です。
var pageH = $("#page").height();
$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loading").delay(600).fadeOut(300);
$("#page").css("display", "block");
});
</script>
<style type="text/css">
#fade {
width: 100%;
height: 100%;
display: none;
position: absolute;
background: #ffffff;
top: 0px;
left: 0px;
z-index: 50;
}
#loading {
position: absolute;
left: 50%;
top: 35%;
margin-left: -30px;
}
</style>
</head>
<body>
<div id="loading"><img src="loading.gif" alt="Loading..."></div>
<div id="fade"></div>
<div id="page">
この部分にページのコンテンツが入ります。
</div>
</body>
</html>
デモページ！
↓ページの容量が軽いので、あまり効果はないですがデモページを作ってみました。
↓デモページのサンプルファイルです。
ローディングを作成できるWEBサービス！
ローディング画像を自分で作成できない方のために、ローディングを作成できるWEBサービスがありますので、ご紹介しておきます。
下記は全て英語サイトですが、どのサイトも直感的に使用できるサイトです。
http://www.webscriptlab.com/
http://loadergenerator.com/
対応ブラウザ！
下記のブラウザでチェック済です。
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)
Internet Explorer 8(Windows)
Internet Explorer 7(Windows)
最後に！
実際に設置してみると、少しはブログに訪れてくれる方のストレスを減らせるような気がします。根本的な解決にはなりませんが、ブログの表示速度改善中の方は、導入してみても良いのではないでしょうか。
以上「jqueryでローディングを設置！ちょっとでもストレスを減らす！」でした！
それではまた。
コメント