【JavaScript】jquery本体をdeferで読み込みつつ、インラインのjqueryを、本体の読み込み後に処理実行する方法【js】

hoge

表題の件、めっちゃわかりづらいかも知れない。（汗）

 

要は、

1. jquery本体はdeferで読み込む。

　↓

2. htmlにインラインでjquery処理を記述する。
※ただし、インラインjavascriptには、仕様によりdeferが適応されない。

　↓

3. このままだと、jquery本体読み込み前に、インラインjqueryが実行されるので、エラーが発生してしまう。

 

そこで！

defer読み込み後に、インラインjqueryを実行するようなタイミング判定をいれたい。

 

ずばり、それはDOMContentLoadedである！

 

DOMContentLoadedイベント発生後に、js処理を実行するようにすれば良い。

 

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            $(document).ready(function() {
                // 処理
            });
        })(jQuery);
    });
</script>

 

または、場合によってはこんな感じの書き方。

<script>
	window.addEventListener('DOMContentLoaded', function() {
		jQuery(function($) {
			// 処理
		});
	});
</script>

 

DOMContentLoadedを使用する理由は、deferの実行条件である「deferはDOMContentLoadedが発生する前に実行される」という条件を逆手に取ったもの。

（参考サイト：MDN web docs：script 要素）

DOMContentLoadedのタイミングでは、既にdeferが完了しているであろうと見越してのタイミング条件への登用です。

 

無事、エラー発生せずに動作するようになった。

本当は、インラインJavaScriptでも、deferが設定できるようになればいいのだけどな。