JavaScript

ページ内に SNS 埋め込みがある時のみ専用スクリプトをスクロール発火で読み込んでみる

ページ内に SNS 埋め込みがある時のみ専用スクリプトをスクロール発火で読み込んでみる

ページ内に SNS 埋め込みがある時にのみ、対応するスクリプトをスクロール発火で読み込む方法を試してみます。

JavaScriptもまだまだ勉強中なので、おかしなところや足りないところがあったら教えてもらえるとうれしいです。

必要な時だけスクロール発火でスクリプトを読み込む理由

理由は2つあります。

  • 余計なスクリプトを読み込みたくない
  • ファーストビューのレンダリング速度を上げたい

余計なスクリプトでページのレンダリングを妨げたくありません。また、SNS 埋め込みがページ内にあったとしてもスクロール発火でスクリプトを読み込むので、ファーストビューのレンダリングが通常よりも速くなることを期待しています。

ちなみに、1つ前の記事でWordPress の関数とPHPを利用して必要なスクリプトのみ読み込む方法を解説しましたが、ぼくの場合そちらは主に amp ページでスクリプトを出し分ける際に利用しています。

通常ページにおける SNS 関連のスクリプトは、全て今回の方法で出し分けています。

指定クラスがページ内にあったらスクロール発火で読み込む

以下は、埋め込み Twitter 用のスクリプトを読み込むために実際に書いているコードです。

function LoadScript(scriptSrc, className) {

	//指定したクラスを document.querySelectorAll で変数に代入
	var adclassName = document.querySelectorAll(className);

	//クラスが1つ以上あった場合の条件分岐
	if(adclassName.length > 0) {

		//以降はスクロール発火による読み込み処理
		var scrollFirstTime = 1;
		window.addEventListener('scroll', oneTimeFunction, false);
		function oneTimeFunction() {
			if(scrollFirstTime === 1) {
				scrollFirstTime = 0;
				var adScript = document.createElement('script');
				adScript.src = scriptSrc;
				adScript.setAttribute('async', 'async');
				document.body.appendChild(adScript);
				window.removeEventListener('scroll', oneTimeFunction, false);
			}
		}
	}
}

//関数でスクリプトの src と分岐に利用するクラスを指定
LoadScript('//platform.twitter.com/widgets.js', '.twitter-tweet, .twitter-video');

//Twitter と Instagram に対応した関数の呼び出し
LoadScript('//platform.twitter.com/widgets.js', '.twitter-tweet, .twitter-video');
LoadScript('//platform.instagram.com/en_US/embeds.js', '.instagram-media');

最初に関数で src と分岐に利用するクラス名を指定します。クラスの指定には当初document.getElementsByClassName()を使っていたのですが、これだと OR 条件での指定が面倒でした。なので、今回はdocument.querySelectorAll()を利用しました。

特にTwitter の埋め込みは、通常ツイート(twitter-tweet)と動画ツイート(twitter-video)でクラス名が違います。これに対応するために OR 条件が必要でした。

以上で通常の埋め込みと動画の埋め込みに付いているクラスをページ内から探し、adclassName.length > 0でクラスが1つ以上ある場合の条件分岐をします。

それ以降の部分は以下の記事を参考にしています。ぜひリンク先にある詳しい解説を読んでみてください。zz さん、ありがとうございます😚

JavaScriptファイルをスクロール発火で遅延読み込みさせる方法

うまくいっていれば、以下のようなスクリプトが読み込まれて……。

<script src="//platform.twitter.com/widgets.js" async="async"></script>

この下に埋め込みツイートが表示されるはずです。

読み込むスクリプトを増やしたい場合は、その数だけLoadScript()で src とクラスを指定して関数を呼び出せば対応できます。


ページ内の要素を検索して、その有無で条件分岐するっていう今回のようなスクリプトは、記事の内容によって見せたいものが変わるブログサイトを制作する時にとても便利です。

読んでくれた方の参考になれば幸いです。また、記事内容よりもっと良い方法や間違いがあった場合は、ぜひ教えていただきたいです。よろしくお願いします🙌🏻