Javascript

【Javascript】画像の遅延読み込みを行うライブラリーjustlazy.js

May 19, 2018
justlazy

justlazy.jsはjQueryを必要としない画像の遅延読み込みを行うライブラリー。

Usage

Define placeholder

data-src (mandatory) 画像のソース
data-alt (mandatory) 画像の代替テキスト
data-title 画像のタイトル
data-srcset レスポンシブイメージ
<span data-src="default/image" data-alt="some alt text"
      data-srcset="small/image 600w, big/image 1000w"
      data-title="some title"
      class="justlazy-spinner">
</span>

Register event
イメージの遅延読み込みを3つのトリガで行う。
css-class

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder");

placeholder

Justlazy.registerLazyLoad(document.getElementById("placeholder-1"));

options

Justlazy.lazyLoad(placeholder[, options]);