BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] インラインのJavascriptを遅延させるには？

2023-05-14 21:56:21

質問

以下のようなhtmlコードがあります。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
    <!-- 26 dec flexslider js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
    <script defer>
    (function($) {
        $(document).ready(function() {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        });
    })(jQuery);
    </script>
</head>
<body>
</body>
</html>

jQueryが定義されていないというエラーが発生します。今、私のインラインJSコードからdeferを削除しても、jQueryは未定義であると言われます。何らかの理由で、私はjQueryプラグインをhead内に保持し、私のJSコードをインラインに保つ必要があります。私の質問は、次のとおりです。

  1. インラインのJavascriptコードは、以下の場合に延期されないのでしょうか？ defer 属性がある場合、インラインの Javascript コードが遅延されるのはなぜですか？

  2. インラインのJavascriptコードでdeferの動作を真似る方法はありますか？必要であれば、bodyタグの末尾に配置することができます。

どのように解決するのですか？

スクリプトに defer 属性は指定された順番に読み込まれますが より前ではなく の前にロードされることはありません。として defer には何の効果もありません。 script タグには効果がありません。 src 属性がない限り、最初に実行されるスクリプトはインラインスクリプトです。つまり、その時点ではまだjQueryは読み込まれていないのです。

少なくとも2つの方法でこれを解決することができます。

  • インラインスクリプトを .js ファイルに記述し、それを src 属性で参照します (さらに defer 属性に加えて)、あるいは

  • インラインスクリプトは、ドキュメントと遅延スクリプトがロードされるのを待ちます。その際 DOMContentLoaded イベントはそれが起こったときに発生します。 

    <script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        })(jQuery);
    });
</script>

注意: 後者の場合 $(document).ready(function() はそれ以上含まれないことに注意してください。それは同じイベントを待つからです ( DOMContentLoaded ). あなたは ができた は元のコードと同じようにインクルードできますが、その場合、jQueryはコールバックの を即座に実行します。 を実行するだけで、実用上の違いはありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します