skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

可視部分の画像のみを読み込むjavascript「lazierLoad 」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ブロードバンド環境が整いつつあるとはいえ、画像を使用しすぎるとローディングが長くなります。
lazierLoadは見えている部分の画像のみを読み込んで表示するjavascriptです。

使用方法
lazierLoadからlazierLoad.jsをprototypeからprototype.js（v1.6）をダウンロードします。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain//lazierLoad.js" type="text/javascript"></script>
以上で完成です。
なお読み込む時に表示する画像はlazierLoad.jsの46、47行目で変更します。
this.options.replaceImage：ブランク画像
this.options.loadingImage：ローディング画像
可視部分の画像のみを読み込むjavascript「lazierLoad 」サンプル

記事作成：2007年12月17日

前の記事：画像ギャラリーの定番javascript「LightBox」
次の記事：iTunesライクな画像ギャラリーjavascript「imageFlow」