jqueryのonloadが実行されない場合について教えてください。

Question

スクリプトの読み込みを非同期で行うよう記述してしまうと、
スクリプトが実行している時点で既に DOM の生成やページの読み込みが終わっている場合、イベントが起動しなくなると言われたのですが、そもそもDOMの生成、ページ読み込み後に発火するのがonloadの挙動のような気がするのですが、なぜ実行されないのでしょうか？

また、同期で順番にスクリプトを実行していき、読み込みなどが終わってしまったことにより、最後のonloadが実行されないなどならわかるのですが、非同期の場合になぜ実行されなくなるのでしょうか？

初歩的な質問で申し訳ありませんが、教えていただけますと幸いです。
よろしくお願い致します。

Comments

[Lhankor_Mhy]

『（onload）イベントが起動しなくなる』という理解でよろしいですか？ 　『スクリプトの読み込みを非同期で行う』とは`defer`属性などのことかと思いますが、遅延読み込みの`script`要素が読み込み終わった時点で`load`イベントが着火するので、そもそも『既に DOM の生成やページの読み込みが終わっている』ということはありえない想定ではないでしょうか。

[退会済みユーザー]

はい。その認識であっています。optimizelyというツールを使っているのが原因かとも思ったのですが、実際に記事にもありました。https://qiita.com/torao@github/items/9915cf2393311eec44d5

Answer 1

試してみました。
……のですが、なぜか退会されているようなのですが、後から読む人のために回答。

<script src="test.js" async></script>

<script src="test.js" defer></script>

alert(document.readyState);
window.addEventListener("load", function(){alert('load')}, false);

alert(document.readyState);
document.addEventListener("DOMContentLoaded", function(){alert('load')}, false);

	async	defer
load	interactive→load	interactive→load
DOMContentLoaded	interactive	interactive→load

ということで、async属性でDOMContentLoadedイベントを取り扱う時には注意した方がよさそうです。

Answer 2

具体的なソースがないのでなんとも言えませんが
非同期で読み終わった際になにかをするなら
$.whenを利用するのが妥当です。
$.Deferrerd()を指定しないと反応しない場合があるので注意
あとは具体的な事例を提示してもらえればそれにあわせた回答になります