画像遅延ロードスクリプト

<img>の画像を、
スクロールにより表示領域内に入るまで読み込まずに転送量とサーバー負荷を軽減するJavaScriptです。
表示領域内までスクロールされると読み込まれます。

Lazy Loadって奴が有名みたいですが、多分似たようなものです。
Lazy Loadってのは、jQueryってののプラグインとして利用するモジュールらしいんですが、
jQueryってのはいろんなことする為のライブラリらしく、
単一機能を利用したいだけの場合サイズが大きくなると思いますので不便じゃないかと思いますが、
これは、36行990byteのスクリプトなんで気軽に使えると思います。


[使い方]
<script src="lazy.js"></script>
<head>辺りでlazy.jsを読み込む。

<img src="1x1.png" data-lazy="表示したい画像のアドレス" style="height:高さ">
<img>要素のsrc属性には、表示したい画像ではなく小さい画像のアドレスを入れる。
代わりにdata-lazy属性に表示したい画像のアドレスを設定。
ロード前は画像の高さが無いので、高さ確保のために表示画像のheightを指定する。

<body onload="ImageLazy()">
ImageLazy()を実行する。
<body>のonloadイベントである必要はありません。
<img>より後にImageLazy()関数を実行出来れば直接実行してもいい。

ImageLazy()関数は、
data-lazy属性の設定された<img>要素が表示下端より上に存在すれば、
src属性の値をdata-lazy属性の値に変換してdata-lazy属性を削除します。
未変換の<img>(表示下端より下の<img>)が存在する場合はonscrollイベントを設定し、
全て変換し終わったら設定されたonscrollイベントを削除します。


data-から始まる属性は、
html5で定義された独自拡張できる属性ですが、
古いブラウザでも機能します。


表示下端までは変換されますので、
スクロール済みの状態でリロードされた場合は一気に読み込まれます。


ダウンロード
posted by ST at 2012-02-06 09:04 | 画像遅延ロードスクリプト | このブログの読者になる | 更新情報をチェックする