インラインのscriptとdefer属性

インラインスクリプトには、defer属性は使えません。

例えば以下のようには書けません。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script defer >
  //c処理
</script>

 

MDNに書いてました↓。

defer属性は、 src 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。

引用:https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#attributes

 

このような場合に、a → b → cと処理したい場合は、以下のように書きます。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
  window.addEventListener( 'DOMContentLoaded', function(){ 
   //c処理
  })
</script>

(defer属性を付けたときの実行タイミングは、DOMContentLoadedの直前です。なのでこの場合、a → b → cという順番になります)

 

もしくは、loadイベントを使って書きます。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
  window.addEventListener( 'load', function(){ 
   //c処理
  })
</script>

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました