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

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

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

サイトのキャプチャ

Lazyestload.js -GitHub

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を加えるだけです。

sponsors

top of page

©2019 coliss