YouTube動画の遅延読み込みができるEcho.js
目次
動画を埋め込むとページの表示が重たいので遅延表示したい
画像を多量に使用してもページを表示するスピードを下げないために以前から「Echo.js」を使用しています。画像の遅延読み込みをするスクリプトで有名なのは「Lazy Load Plugin for jQuery」ですが、「Echo.js」は jQueryに依存せず4KBと非常に軽量ということもあり気に入ってます。
この「Echo.js」ですが、動画も遅延対象にできるようです。
大量のYuoTubeの動画をまとめたブログがあるのですが、ページを表示する時間がかかり、ちょっとのアクセス量でダウン気味になるといったことがありました。これを機にYouTubeの埋め込みコードの<iframe></iframe>を「Echo.js」で遅延読み込みさせるようにしました。
動画を遅延表示している参考ページ
以下のページに複数のYou-Tube動画を埋め込んで遅延表示させています。
ダウンロードページ
以下の作者のページからEcho.jsをダウンロードできます。
使用するのは、srcの中のecho.jsか、distの中のecho.jsかecho.min.jsでいずれかを適当なディレクトリに保存します。
Echo.jsでYou-Tubeのiframeを遅延表示させるための準備
デフォルトのままのecho.jsは画像の<img>タグしか遅延表示に対応していないので、You-Tubeの埋め込みコードに使用されている<iframe>も対象に加えるためにはecho.jsに手を加えたないといけません。
echo.jsを開いて75行目あたりに以下のコードがあります。（ちなみにこの記事を書いた時点はv1.7.0なので現在は内容が異なっているかもしれません。）
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
これに,iframe[data-echo]を追加して以下のように修正し上書き保存します。
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background], iframe[data-echo]');
遅延させたいソースを『data-echo』で指定する
画像<img>を遅延させる場合の
<img src="loading.gif" data-echo="mainImage.jpg" />
とするように、iframeのコード内のsrc="***"をdata-echo="***"にするだけで遅延の対象となります。
<iframe width="420" height="315" src="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe> //srcをdata-echoに変更するだけ <iframe width="420" height="315" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>
読み込みを開始するまでにダミーの画像を表示させたい場合はsrc="***"でダミー画像を指定します。ここを省略してダミー画像を表示させないこともできます。
<iframe width="420" height="315" src="loading.gif" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>
基本的なコードの使い方
当然ですが、遅延読み込みするためにはEcho.jsを読み込んでおく必要があります。
<script type="text/javascript" src="echo.js"></script> <script type="text/javascript"> echo.init(); </script>
細かいオプション設定
遅延時間の指定や、読み込みを開始するかを指定する場合は以下のようになります。
ここではブラウザの表示部分に対象の画像や動画が50px以上表示されたら250ms遅延させてから表示する設定を例にしています。offsetとthrottleがその部分です。
<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
echo.init({
offset: '50',
throttle: '250'
});</script>
offsetは遅延する画像の領域に上から50pxまでスクロールしたら表示開始するという表示開始位置設定。0を指定した場合は、表示領域内に入ったらすぐに表示。この設定を省略した場合もデフォルト値の0となります。
その他のオプション例
;<script type="text/javascript">
echo.init({
offset: 0, //オフセット値(画像にどれくらい近付いたら読み込むか)
offsetVertical: 0, //上下方向のオフセット値
offsetHorizontal: 0, //左右方向のオフセット値
offsetTop: 0, //上方向のオフセット値
offsetBottom: 0, //下方向のオフセット値
offsetLeft: 0, //左方向のオフセット値
offsetRight: 0, //右方向のオフセット値
throttle: 250, //処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間)
debounce: true, //throttleを有効にするかどうか
unload: false, //画像が表示範囲から外れた時に読み込み前に戻すかどうか
callback: function (element, op) { //コールバック
console.log(element, 'has been', op + 'ed')
}
});
;</script>
詳しくは以下の製作者のページを参照してください。ちなみに英文です。
Chromium系ならloading="lazy"追加するだけ
最近のChromium系のブラウザならJavascriptを使うことなく、<iframe>にloading="lazy"を追加するだけ遅延表示ができるらいです。