jQueryでFlashっぽいローディングを表示させられる「QueryLoader – preload your website in style」

Flashでは、表示が重いときにローディング画像を見せることがあります。
これをJavaScriptでも実現したのがjQuery「QueryLoader -- preload your website in style - Gaya Design」です。

使用方法

QueryLoader -- preload your website in style - Gaya Designからファイルをダウンロードします。
またjQueryからjquery.jsをダウンロードします。


<style>
.QOverlay {
	background-color: #000000;
	z-index: 9999;
}

.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="queryLoader.js"></script>

上記を記述したら、bodyの手前に以下を書きます。


<script type='text/javascript'>
	QueryLoader.init();
</script>

またオプションとして、特定のidのみを対象にできるようです。


<script type='text/javascript'>
	QueryLoader.selectorPreload = "id名";
	QueryLoader.init();
</script>

サンプル

見えちゃいましたよね・・・。

重くしてみた画像 by 足成 Javascriptサンプルページ一覧

skuare.net