async属性をつけた <script async>
は非同期で読み込まれるため、
ドキュメントの読み込みが完了した時点で script
が読み込まれていないことがある
その場合、読み込みの状況次第では DOMContentLoaded
が発火しない
old.js
function main() {
// 読み込み後に動かしたいコード
}
document.addEventListener("DOMContentLoaded", main, false);
改善策として、ドキュメントの読み込み状態をチェックする
document.readyState を見れば、状況が分かる
NEW.js
function main() {
// 読み込み後に動かしたいコード
}
if (document.readyState !== "loading") {
main();
} else {
document.addEventListener("DOMContentLoaded", main, false);
}