jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき

Mon, 28 Jan 2019 23:58:24 +0900

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);**で囲ってみてください。

特にChromeは動くけど、EdgeやInternet Explorer(IE)で動かないときはこちらが有効でした。

<script defer>
    window.addEventListener( 'load', function(){
        スクリプト
    }, false);
<script>

のようにスクリプトを囲ってやれば、Deferで読み込んでもスクリプトが動くようになります。詳しくは以下のサイトに詳しく例が書いてありましたので参考にしてみてください。

それでも動かない場合、を、****にする必要なときがあります。

参考サイト

https://norando.net/jqueryplugin-and-defer/ https://norando.net/jqueryplugin-and-defer/

https://sakura.monte-verita.biz/3981 https://sakura.monte-verita.biz/3981

Onloadを使って回避する方法もある

以下のページには上記と違う方法で回避する方法もありました。私も使ってみたところうまく回避できました。

<script defer src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" onload="
        $(function() {
            $('form').submit(function() {
                $('form').find(':submit').attr('disabled', 'disabled');
            });
        });
    "></script>

https://qiita.com/suzunone/items/55277b99893b2a6cf353 https://qiita.com/suzunone/items/55277b99893b2a6cf353

また、指定したJSとCSSをDeferとAsyncを使い分けて読み込むPrefetchLoader.jsというスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。

ですが、GTmetrixやPagespeed Insightsなどで測定すると表示の時間は遅くなりました。見た目は速い感じがするんですが不思議です。今回は適用を見送りましたが、気になるのでまた試してみたいと思います。

その他参考サイト

JSをどこで読み込むかで表示スピードが変わる実験結果が書いてありました。ともて興味深いのでメモ。