.init()(options)
更新日: 2018-11-09
init()にはいくつかのオプションがあります。
offset
| type | 初期値 | 説明 |
|---|
number, string | 0 | 画像のロードを開始する表示領域からの距離を指定します。 |
offsetオプションは、画像のロードを開始させる表示領域の範囲(上下左右)を指定します。 0を指定した場合、表示領域が見えたらすぐにロードします。 もし上下1000px以内でロードさせたい場合は、1000を指定します。
offsetVertical
| type | 初期値 | 説明 |
|---|
number, string | offsetの値 | 画像のロードを開始する表示領域からの上下の距離を指定します。 |
offsetHorizontal
| type | 初期値 | 説明 |
|---|
number, string | offsetの値 | 画像のロードを開始する表示領域からの左右の距離を指定します。 |
offsetTop
| type | 初期値 | 説明 |
|---|
number, string | offsetVerticalの値 | 画像のロードを開始する表示領域からの上の距離を指定します。 |
offsetBottom
| type | 初期値 | 説明 |
|---|
number, string | offsetVerticalの値 | 画像のロードを開始する表示領域からの下の距離を指定します。 |
offsetLeft
| type | 初期値 | 説明 |
|---|
number, string | offsetHorizontalの値 | 画像のロードを開始する表示領域からの左の距離を指定します。 |
offsetRight
| type | 初期値 | 説明 |
|---|
number, string | offsetHorizontalの値 | 画像のロードを開始する表示領域からの右の距離を指定します。 |
throttle
| type | 初期値 | 説明 |
|---|
number, string | 250 | 連続スクロール時の待機時間(タイムアウト)を指定します。 |
throttle機能は、 windo.onscrollイベントが連続で発生することによるパフォーマンスの低下を防ぐために、 内部機能によって管理されています。 throttleオプションを使用すると、 ユーザーがスクロールした時に、僅かな待機時間(タイムアウト)が設定され、 スクロールを停止するまで、その時間が維持されます。 初期値は250msです。
debounce
| type | 初期値 | 説明 |
|---|
boolean | true | debounceを有効にするかどうかを指定します。 |
デフォルトでは、throttle機能は実際はdebounce機能のため、スクロールのチェックは、ユーザーがスクロールを停止した時にだけ作動します。 throttleオプションで指定したミリ秒単位で画像をチェックする、従来の方式を使いたい場合は、 debounceオプションにfalseを指定します。
unload
| type | 初期値 | 説明 |
|---|
boolean | false | 読み込まれた画像を一旦アンロードするかどうかを指定します。 |
unloadオプションは、 表示領域を超えてスクロールした場合に、読み込まれた画像を一旦アンロードさせます。 (offset領域を含みます。)
callback
| type | 初期値 | 説明 |
|---|
function | | コールバックを指定します。 |
callbackには、更新された要素と、 更新処理(loadまたは、unload)が渡されます。 これは要素にloadedといったクラスを追加したい場合等に便利です。
echo.init({
callback: function(element, op) {
if(op === 'load') {
element.classList.add('loaded');
} else {
element.classList.remove('loaded');
}
}
});