テスト - 画像を遅延ロードする

■デモ

ファーストビューでスクリーン外にある画像を対象に遅延ロードを行う

» デモページ1
■ JavaScriptの設定例
config : {
	cls : '',
	blank : 'images/blank.gif',
	outside : true,
	fade : true,
	speed : 50,
	step : 0.5
},

特定のクラスが付加された全てのimg要素を対象に遅延ロードを行う

» デモページ2
■ JavaScriptの設定例
config : {
	cls : 'lazy',
	blank : 'images/blank.gif',
	outside : false,
	fade : true,
	speed : 50,
	step : 0.5
},

■使い方

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

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

jsの設定値で、blank.gifのパスや動作に関する設定をサイトに合わせて編集する。
設定値の概要は下記を参照。

■javascriptの設定

jsファイル内の13~23行目付近にある設定値を編集することで、遅延ロードした画像の表示の仕方(フェードインを使用するか)や、
遅延ロードしたいimg要素のクラス指定、スクリーン外のimg要素のみを対象とするかを設定することができる。

//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
	cls : '', // クラス指定する場合のクラス名(未指定の場合は全画像が対象)
	blank : 'images/blank.gif', // blank画像のパス
	outside : true, // ファーストビュー時に画面外にある画像のみを対象とする
	fade : true, // 画像をフェードインする
	speed : 50, // フェードインの実行間隔(ミリ秒単位)
	step : 0.5 // フェードインの加算値
},