ENTEREAL

最近、固定回線、モバイル回線等の接続速度が速くなり、昔の56kや64kbpsの頃のように画像のサイズやページの表示レスポンスに気を使う事が少なくなりました。今や普通のブログ等であれば、体感で1秒あれば表示が出来る時代です。

でも、ひとたび、高精細な画像や、Youtube動画などを複数並べるページになると、まだまだ環境的に厳しい方も多いと思います。

そんな時、制作側で出来る事というと、まずは画面に表示されている画像だけを先に読み込んで表示し、それ以外は、スクロールして画面に表示された段階で読み込むなど、体感速度を上げる方法が一般的です。

よく出来た Lazy Load Plugin for jQuery

その手のスクリプトで一番使われているのは、おそらく「Lazy Load Plugin for jQuery」では、無いでしょうか？

使い方も簡単で、jQuery本体と、ダウンロードしたjquery.lazyload.jsを読み込んで、

対象の画像に指定(又は、任意)のクラス名を付与し、src="img/***"をdata-original="img/***"に変更します。

// クラス名 "lazy" を付与
// src="img/sample-image.jpg" を data-original="img/sample-image.jpg" に変更

最後に、ページのロードイベントを登録するだけ。

ロードタイミングの微調整など、オプション設定も豊富なので、画像のみの場合であればこれで十分です。

でも、唯一出来ない事が、「Youtubeなどの動画の遅延読み込み」です。

これに関しては、ネット上で複数探してみましたが、適当なものは見つかりませんでした。

もっと簡単な Echo.js

Lazy Load Plugin for jQueryと同種のスクリプトで「Echo.js」というのがあります。

jQueryに依存しない、単純なJavaScriptのスクリプトです。4KBと非常に軽量です。

このEcho.jsも、基本的には画像のみに対応したスクリプトなのですが、jQuery本体も必要ないですし、クラス名を付与する必要ありません。

ダウンロードしたecho.jsを読み込んで、

src="img/***"をdata-echo="img/***"に変更して、

// src="img/sample-image.jpg" を data-echo="img/sample-image.jpg" に変更

最後に、ページのロードイベントを登録するだけ。

// jQuery不要なので、これでも大丈夫です。

Echo.js に19文字足して動画も遅延読み込み

Echo.jsスクリプトの65行目辺りの

echo.render = function () {
var nodes = document.querySelectorAll('img[data-echo]');			// 対象行 (変更前)
var length = nodes.length;

を、以下のように, iframe[data-echo]を加えると、

echo.render = function () {
var nodes = document.querySelectorAll('img[data-echo], iframe[data-echo]');			// 対象行 (変更後)
var length = nodes.length;

Youtubeなどのを使った、埋め込み動画も遅延の対象になります。

前項と同様にiframeのsrc="***"をdata-echo="***"に変更すれば出来上がりです。

// src を data-echo に変更するだけ。

動画の読み込みを先送りすると、ページのレスポンスは大幅に改善します。

下の、超シンプルなサンプルで動きが確認可能です。