21

Jqueryファイルへのリンクを含む、ページの読み込み速度のために推奨されるように、すべてのJSファイルがフッターで参照されているプロジェクトがあります。このコードは「Uncaught ReferenceError」を生成します。これは、スクリプトが呼び出される前に Jquery が定義されていないためだと思います。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    <body>
        <p>
            <a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a>
        </p>
        <script type="text/javascript"> 
            $(function(){
                $('#example').popover({ trigger:'hover' });
            })
        </script>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </body>
</html>

Jquery リンクをヘッダーに移動すると、コードは正常に実行されますが、ページの読み込み時間が遅くなります。

この UncaughtReference エラーをスローしないように関数を宣言するより良い方法はありますか、または Jquery リンクをヘッドに保持するのが最善の解決策ですか?

4

5 に答える 5

17

ロードされるjQuery前に使おうとしているからです。ドキュメントの頭のjQueryようなライブラリを配置する必要がありますjQuery

<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>

一般に、スクリプトはドキュメントの末尾の body タグの近くに配置され、使用しているライブラリなどは次の場所に配置されます<head>

于 2013-04-17T15:22:37.293 に答える
14

私は jquery を一番下に置いておくのが好きです。最初に DOM 全体がロードされていることを確認し、まだ使用できない jQuery なしでそれを確認する必要があります。代わりにこれを使用してみてください：

document.addEventListener("DOMContentLoaded", function(event) { 
      $(function(){
          $('#example').popover({ trigger:'hover' });
      });
});
于 2016-05-08T18:46:33.473 に答える
7

jQuery ライブラリを参照する前に、jQuery を含める必要があります。

これに変更します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<script type="text/javascript"> 
$(function(){
   $('#example').popover({ trigger:'hover' });
});
</script>

また、ページのレンダリングが遅れないように、ドキュメントのフッターに jQuery やその他の JavaScript を含めることをお勧めします。

于 2013-04-17T15:22:18.427 に答える
4

最近jsTreeサイトで別のテクニックを見ました

上部 (HEAD タグ内) で、次のように設定します。

<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>

<script>$(function () { /* your $() calls here */ });</script> いつでもどこでもやりたいことができるようになりました...

最後に jquery.js を通常どおりインクルードし、最後のスクリプトは次のとおりです。

<script>$.each($q,function(i,f){$(f)});$q=null;</script>

これが誰かに役立つことを願っています...

于 2016-02-11T16:56:59.070 に答える