[JavaScript] 画像を遅延ロードする2

作った当時の自分の色々な怠慢が発覚したため色々と修正しました。
できることは前と変わってません。

使い方

ファイルの読み込み

ZIPファイルを解凍後(中身はlazyload.jsとblank.gifのセット)、各ファイルを任意のディレクトリに配置し、
本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="js/lazyload.js"></script>

基本的にはこれだけでOKです。
特定クラス名を持つ img要素 のみに適用したい場合は以降を参照してください。

クラスの指定

img要素 に特定のクラス名を持つ場合のみ遅延ロードの対象とする場合は、
遅延ロードの対象とする img要素 に適当なクラス名を付加します。

<img class="lazy" src="img/sample.png" alt="" />

この例の場合はクラス名に "lazy" を付加しています。

javascriptの設定

次に lazyload.js をテキストエディタなどで開き、
ファイル内の14~20行目付近にある設定値のなかから "cls" の部分に先ほど付加したクラス名を記述して保存します。
その他に画像フェードに関する諸々の設定を変更できます。

config : {
	cls : 'lazy', // クラス指定する場合のクラス名(未指定の場合は全画像が対象)
	blank : 'img/blank.gif', // blank画像のパス
	fade : true, // 画像をフェードインする
	speed : 50, // フェードインの実行間隔(ミリ秒単位)
	step : 0.5 // フェードインの加算値
},

以上で設定完了です。

kstさん、色々とご協力いただき有難うございます。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/231

コメント投稿フォーム