2018年10月22日(月)

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js

• 0
• 138
• 197
• 227

最近はLazy Loadを採用しているサイトが増えていますね。
Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。

そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。

Lazyestload.js -GitHub

Lazyestload.jsの特徴

Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。

画像はビューポート内にある時、およびスクロールが停止した時にロード。

ロード前の状態は、CSSで簡単にスタイルできます。

プレースホルダ（グレーの矩形）にも対応。