javascriptによる動画読み込み遅延がIE11で動かないので修正しました

動画の埋め込みは、(動画の重さにもよるのですが)ページの読み込みスピードを損ねる要因となります。
SEO対策の面からも、ページの表示速度は早めにしておきたいところです。

そこで、動画の読み込み遅延をJavascriptで行いたいと思います。

ググれば出てくるよくある記述がこちら。

記述

HTML

<iframe class="defer" data-src="https://www.youtube.com/embed/..." ...></iframe>

javascript

function movie_defer() {
	var iframes = document.querySelectorAll('.defer');
	iframes.forEach(function(iframe){
		if(iframe.getAttribute('data-src')) {
			iframe.setAttribute('src',iframe.getAttribute('data-src'));
		}
	});
}
window.addEventListener('load', movie_defer);

解説

HTML側の記述

srcを使用しないことでHTMLのレンダリング中に動画の読み込みがスキップされます。

javascript側の記述

window.addEventListener('load', ...の記述で、読み込みがすべて終わった後に動画が読み込まれます。

注意! この記述、IEでは動きません。

querySelectorAll で取得した物(上記記述でいうと iframes )に対して、forEach() でループ処理する手法はIEに対応していないらしいです。 つまり、iframes.forEach() の形ではIEで動かないのです。

NodeList.prototype.forEach()
https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

そこで、IEでも動くようにjavascriptの記述を修正します。

IEでも動く動画の読み込み遅延

javascript

function movie_defer() {
	var iframes = document.querySelectorAll('.defer');
	var iframe = Array.prototype.slice.call(iframes,0);
	iframe.forEach(function(iframe){
		if(iframe.getAttribute('data-src')) {
			iframe.setAttribute('src',iframe.getAttribute('data-src'));
		}
	});
}
window.addEventListener('load', movie_defer);

解説

querySelectorAll で取得した物(上記記述でいうと iframes )を Array.prototype.slice.call で配列として取り出し、forEach()でループ処理します。

これでIEでも動画読み込み遅延が可能となります。

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー(嫁)

Web屋さんで8時間フルタイム勤務をしている、いわゆるワーキングマザー。
夫婦共働きで、ムスメ氏を育てています。
主に資産運用にかかわるお金の話、ムスメ氏を育てていく上での子育ての話、そしてたまにお仕事関連の記事を書いていく予定。
プロフィールを見る