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

2011/04/08
CATEGORY : jQuery , 天一以外
このエントリーをはてなブックマークに追加

チャオ!みんな元気?オレッちはすこぶる元気。

ところでみんなFlash好き?今はキライでも好きな時期はあったはずだろ?
そうだろ?照れなくていいよ。

で、Flash作る時って必ずローディングバー入れただろ?そうだろ?わかってるよ。
昨日天一でこってり食べただろ?

そんなローディングをjQueryを使って実装してみたわけ。
当然、擬似ローディングだけどね。

ちょっとのぞいていきなよ。

まずはページ読み込み時のフェードインの説明するよ

このサイトはページ読み込み時と<a>要素クリック時にフェードイン・フェードアウトする<div>要素を入れてるわけ。

図で説明するとこんな感じ。

 

この図の<div id="fade">はページ全体を#FFFで覆っているのね。それを消したり出したりしてるわけ。

でそのスクリプトはこんな感じ。

$('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.onload = function() {
	windowFade();
};
window.onunload = function() {
	windowFade();
};

これでページ読み込み時と<a>要素クリック時に<div id="fade">がフェードイン・フェードアウトするわけ。簡単だろ?

今回はこの<div id="fade">内にローディングイメージを仕込むわけ。

兄貴、ローディングイメージってどうやって作るんですかぃ?

そんな子羊なお前さんにゃぁ、こんなサイトを使えばいいよ。

でもオレってばもちろんオリジナル。
もう見てもらってるから分かると思うけど、当然ジナルわけ。

兄さん!ページ読み込みが完了する前にフェードインしちゃう!

っていう問題が発生しちゃうのは知ってるよ?
それじゃローディング画面にならないよ!ってんだろ?

わかってるよ。

ちょっともったいぶっただけだよ。どう?オレってシブイだろ?

要するに、javascriptの"ページロード時"の記述にあたる

window.onload = function() {
	windowFade();
};

を、

$(window).load(function()
{
  windowFade();
});

っていう風に"ページ読み込みが完了したら"に変えてあげればいいだけ。

わかる?これでページ読み込みが完了したらjavascriptが実行されるわけ。
っていうオレもgoogle先生に聞いたんだけどね。ガハハ。

 

どう?オレのこと見直した?

 

見直したんならさ。また寄ってよ。サービスするからさ。

今日の一言

最後までキャラ設定が意味不明。

コメント
  • はじめまして。カキノハナと申します。
    グーグルから、こちらのサイトを知りました。
    この擬似ローディングが、とにかくカッコよくて
    なんとか試そうとしたのですが、
    mootoolsと競合しているせいか、
    何度やっても”オブジェクトを指定してください”のエラーがでます。。
    まる2日間、苦闘したのですが、もうお手上げ状態なので、
    大変失礼かもしれないですが、コメントした次第です。

    jQuery.noConflict(); を使えば共存できるとグーグル先生は
    言ってましたのが、ダメでした。。
    mootoolsとの共存は可能でしょうか?

    お忙しい中、厚手がましいですが、是非とも返信をお待ちしています。
    どうかお願いしますm(_”_)m

    2011/07/01 05:44 | はじめまして。。

  • カキノハナさん。はじめまして。

    コメントありがとうございます。
    そしてコメント放置してスミマセン。。

    ご質問の件、ソースを見てみないと正直分からないのですが、
    moontoolsを外したらきちんと動作しましたか??

    また、html内に<div id=”fade”>を記述されていますか??
    cssでも、#fadeに画面全体を覆うように指定されていますか??

    ちなみに私はこのように指定してます。
    #fade {
    position: absolute; /* ie6 */
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    text-indent:inherit;
    z-index:9990; }

    どうでしょうか…??

    ご解決できたらいいのですが。。。

    2011/07/13 02:12 | EijiShibutani

  • はじめまして。
    こちらのページを参考にjsを実装してみました。
    #fadeで囲った領域が確かに反応しているのですが、フェードインとアウトが逆になってしまいます。自分で問題解決が出来なかったので、こちらにコメントしてみました。

    2011/10/02 19:11 | yashiro

  • すいません。自己解決しました。

    2011/10/03 00:17 | yashiro

  • yashiroさんはじめまして。

    自己解決されたようでよかったです:-)

    私自身、javascriptとかjQueryとかあんまり詳しくないのにこんな記事書いてる見栄っ張りですが、これからもちょこちょこのぞいてやってください。

    2011/10/03 00:24 | EijiShibutani

  • はじめまして。
    不躾で申し訳ないですが、
    if( this.href.match(location.hostname) && $(this).attr(“href”).charAt(0) != “#” && !$(this).attr(“rel”) && !$(this).attr(“target”) )
    ここの部分はなにを判別しているのでしょうか?

    2012/02/15 16:54 | asg

  • asgさんどうもです。

    そこは、#を使ったページ内リンクを判定してます。
    リンクに#がついてたら動かないようにしてます。

    ページ内のアンカーに飛ぶときも動いちゃうと困りますからね。

    2012/02/15 18:51 | EijiShibutani

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2013 THE AGE