1

Yahoo は、パフォーマンス上の理由から、HTML ページの下部にスクリプトをロードすることを提案しています。ルールを尊重する HTML5 ボイラープレートを使用します。

このアプローチの問題点は、jQuery も下部にロードされることです。何らかの理由で jQuery コードを含むインライン JavaScript を記述する必要がある場合$は、名前空間でまだ使用できないため、できません。

これは、たとえば、次のマークアップを必要とする gallery.js (jQuery 画像ギャラリー エンジン) で発生します。

<div id="gallery">
    <img src="/media/img1.png" />
    <img src="/media/img2.png" />
</div>

<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>

jQuery は後でロードされるため、高さを設定するコードは#gallery機能しません。Firebug コンソールは次のようになります。

ReferenceError: $ is not defined

名前空間でシンボルが見つかる<script>まで、ブロックの実行を後押しするためのヒントはありますか?$

4

4 に答える 4

5

jQuery<script>タグを一番下に残して、Galleria<script>をそのすぐ下に移動します。

<script type="text/javascript" src="jquery.js"></script>
<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>
于 2012-07-31T01:40:07.197 に答える
1

独自の「Ready チェッカー」を作成できます。

 <script>
    var id = window.setInterval(function(){

         if(document.readyState != 'complete') return;

         //onload code here

         window.clearInterval(id);
    }, 10); 
 </script>

このようにして、ドキュメントの準備が整い、ドキュメントの下部にある場合でも jQuery が読み込まれるまで待つことができます。

于 2012-07-31T01:49:18.977 に答える
1

スクリプトを関数でラップし、jQuery のロード後に実行されるスクリプト内から呼び出すことができます。

于 2012-07-31T01:36:22.037 に答える
0

可能であれば、jQuery を HEAD に配置してください。これは非常に一般的なライブラリであるため、許容されます。ただし、jquery スクリプト インクルードの後に​​来るようにスクリプト ブロックを明らかに移動する以外に、ほとんど 1 つのオプションがあります。...私の意見では、前述は応急処置です...ベストプラクティスではありません。

注意: ユーザーが 2 秒以内に jQuery をロードすると「推測」しているため、これはまったく信頼できません。もちろん、タイムアウトを長くすることもできます。ただし、ユーザーの速度 (/age) と帯域幅のすべてがタイミングに影響します。それは予測不可能です。

于 2012-07-31T01:39:15.937 に答える