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

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

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

Lazyestload.js -GitHub

• Lazyestload.jsの特徴
• Lazyestload.jsのデモ
• Lazyestload.jsの使い方

Lazyestload.jsの特徴

1. Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。
2. 画像はビューポート内にある時、およびスクロールが停止した時にロード。
3. ロード前の状態は、CSSで簡単にスタイルできます。
4. プレースホルダ（グレーの矩形）にも対応。
5. わずか400 bytesの超軽量スクリプト。

Lazyestload.jsのデモ

デモではLazyestload.jsで実装されたLazy Loadを試すことができます。ページを上下にスクロールし、画像をビューポート内に表示させてみてください。

デモページ

デモでは、画像がビューポートにある時（100px以内）、ユーザーがスクロールを停止した時（0.2秒以上）に画像をロードします。

Lazyestload.jsの使い方

基本書式

使い方は非常に簡単です。
外部ファイルを</body>の上に記述し、Lazy Loadさせたい要素に「.lazyestload」を加えるだけです。

data-srcsetと一緒に使用することもできます。

picture要素の場合は、img要素のみに適用するだけで大丈夫です。

オプション

FacebookやYouTubeのようにプレースホルダ（グレーの矩形）を使用する場合、画像は1kb, 幅40px以下にし、置き換える画像と同じアスペクト比で用意します（レイアウトジャンクションを避けるため）。

デモのように「ぼかし」の効果を与えるには、以下のようにCSSを加えるだけです。