Carpe Diem

  Top > スポンサー広告> JavaScript > JavaScriptで擬似ローディング  

スポンサーサイト

-- - --/-- [--] - --:--

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

JavaScriptで擬似ローディング

2012 - 09/20 [Thu] - 10:46

jQueryをいれて動的なWebコンテンツにしたはいいけど、データ増えてローディング処理の見た目が悪い。
そう思い何かいいローディング方法がないかと探したらありました。

Flashのローディングみたいな動作をJavaScriptで実装します。
図のように、ページ読み込み時に対し画面全体にdiv要素を上乗せしておいて、これをフェードさせるわけです。

fade.jpg
※画像はソース元から引用

この図の
はページ全体を#FFFで覆っています。これを消したり出したりするわけです。

◆スクリプト
/* ---------------------------------------------------------------

MAIN.JS

--------------------------------------------------------------- */


//windowFade
$('head').append('<style type="text/css">#fade{display:block;height:' + $(window).height() + 'px}</style>');
function windowFade(){
$('#fade').each(function(){
$('#fade').fadeOut(1000).height($('body').height());
$('a').click(function(){
var url = $(this).attr('href');
if( this.href.match(location.hostname) && $(this).attr("href").charAt(0) != "#" && !$(this).attr("rel") && !$(this).attr("target") ){
var LinkURL = $(this).attr("href");
$('#fade').fadeIn(1000,function(){
location.href = LinkURL;
});
return false;
}
});
});
};
$(window).load(function()
{
windowFade();
});
window.onunload = function() {
windowFade();
};


$('a').click(function()から始まる部分は<a>要素をクリックした時の動作です。#によるページ内リンクでは動作しないようにするためのものです。
なのでページの読み込み時のみローディング動作をさせたい場合は$('a').click(function()の部分は削除してください。
またコードを読むとわかりますが、jQueryが必要なので
<script type="text/javascript" src="./jquery.min.js"></script>

などして読み込んで置いてください。


◆HTML
最初に読み込む必要があるので、以下を body のすぐ後に挿入してください。

<div id="fade">
<table width="100%" height="100%" align="center" vertical-align="middle">
  <tr>
    <td width="100px" height="31px" align="center" ><img src="./loading.gif" width="100" /></td>
  </tr>
</table>
</div>

ローディングのイメージ画像は、自分で作れなければ以下のサイトから作成するといいです。

Ajaxのローディング画像が作れるジェネレータまとめ


◆CSS
上記のスクリプトではid="fade"に対して動作させているので、CSSでdiv要素の設定をします。

#fade {
position: absolute; /* ie6 */
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
background: #fff;
text-indent:inherit;
z-index:9990; }

なぜか参考サイトと同じ記述では画面全体がdivで覆われなかったので、min-heightをつけました。

以上で動作します。
しない場合は id、jQueryの指定、CSSファイルの指定などを確認してみてください。


ソース:
javascriptで擬似ローディングを実装してみた

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

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