ファーストビューでスクリーン外にある画像を対象に遅延ロードを行う
» デモページ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のパスや動作に関する設定をサイトに合わせて編集する。
設定値の概要は下記を参照。
jsファイル内の13~23行目付近にある設定値を編集することで、遅延ロードした画像の表示の仕方(フェードインを使用するか)や、
遅延ロードしたいimg要素のクラス指定、スクリーン外のimg要素のみを対象とするかを設定することができる。
//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
cls : '', // クラス指定する場合のクラス名(未指定の場合は全画像が対象)
blank : 'images/blank.gif', // blank画像のパス
outside : true, // ファーストビュー時に画面外にある画像のみを対象とする
fade : true, // 画像をフェードインする
speed : 50, // フェードインの実行間隔(ミリ秒単位)
step : 0.5 // フェードインの加算値
},