jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき | QWERTY.WORK
jQueryの読込にDeferやAsync使ったら動かなくなった サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSにdeferやasyncを付けていたら、jQueryにDeferを付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。 <script src='/js/jquery.min.js' defer></script> そんなときの対処法 jQueryに依存するスクリプトをwindow.onload = function() {...}で囲ってみてください。 <script defer> window.onload = function() { スクリプト } </script defer> または、window.addEventListener( 'load', function(){...}, false);で囲ってみてください。 特
<script>: スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
この要素にはグローバル属性があります。 async クラシックスクリプトでは、 async 属性があった場合、クラシックスクリプトが利用可能になるとすぐに並行して読み込み、解析と評価を行います。 モジュールスクリプトでは、 async 属性があった場合、そのスクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。 この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することができます defer はこの場合に同様の効果があります。 これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。 ブラウザーの対応状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。
スクリプト: async, defer
最近の web サイトでは、スクリプトは HTML よりも “重い” ことがしばしばです: ダウンロードサイズはより大きく、処理時間も長くなります。 ブラウザが HTML をロードし、<script>...</script> タグに遭遇すると、DOM の構築を続けることはできません。すぐにスクリプトを実行する必要があります。外部スクリプト <script src="..."></script> についても同じです: ブラウザはスクリプトをダウンロードし、それを実行するまで待つ必要があり、その後にページの残り部分の処理をすることになります。 これは2つの重要な問題につながります: スクリプトは、それ以降の DOM要素は認識することができないため、ハンドラーを追加したりすることはできません。 ページの先頭に重いスクリプトがあると、“ページをブロック” します。利用者はそれがダウンロードされ実行
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
