YouTube動画の遅延読み込みができるEcho.js

画像を多量に使用してもページを表示するスピードを下げないために以前から「Echo.js」を使用しています。画像の遅延読み込みをするスクリプトで有名なのは「Lazy Load Plugin for jQuery」ですが、「Echo.js」はjQueryに依存せず4KBと非常に軽量ということもあり気に入ってます。

画像の場合その「Echo.js」ですが、動画も遅延対象にできるようです。

大量のYuoTubeの動画をまとめたブログがあるのですが、表示に時間がかかる上にちょっとのアクセス量でダウン気味になるといったことがありました。これを機にYouTubeの埋め込みコードの<iframe></iframe>を「Echo.js」で遅延読み込みさせるようにしました。

ちなみにそのブログ記事↓

• http://hoshiya.biz/blog/2015/06/cm.php

Echo.jsをダウンロード

以下のどちらかからダウンロードします。

• http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
• https://github.com/toddmotto/echo

使用するのは、srcの中のecho.jsか、distの中のecho.jsかecho.min.jsでいずれかを適当なディレクトリに保存します。

Echo.jsにiframeを対応させる

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>

細かい設定

遅延時間の指定や、読み込みを開始するかを指定する場合は以下のようになります。

<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
		echo.init({
		  offset: '50',
		  throttle: '250'
   		 });</script>

offsetは遅延する画像の領域に上から50pxまでスクロールしたら表示開始するという表示開始位置設定。0の場合は、表示領域内に入ったらすぐに表示。デフォルトは0。

throttleはoffsetの位置に来てから250ms遅延させてから表示する遅延時間の設定となります。（多分...。）

その他のオプションも含めて、詳しくは以下を参照してください。ちなみに英文。

• https://github.com/toddmotto/echo/blob/master/README.md