4

各 HTML ページに多数の JavaScript ファイルが含まれている Web アプリケーションの読み込み時間を最適化する必要があります。そのようなページでhead.jsを試して、ロード時間が改善されるかどうかを確認したいと思います。$(document).ready(callback)これらの JS ファイルには、head.js がまだ残りの JS ファイルをダウンロードしている間に DOM がロードされたときに呼び出されるコールバックが多数あります。

readyjQueryにそれ自体でイベントをトリガーしないように指示する方法はありますか?

4

3 に答える 3

1

ドキュメント準備完了イベントを手動でトリガーする理由がわかりません。

代わりに、jQuery の組み込みtrigger&bind機能を使用して、独自のイベントをサブスクライブおよび公開します。これはベスト プラクティスであり、最適なソリューションです。

ワーキング JSFiddle デモ

于 2012-08-07T16:38:39.190 に答える
0

私は小さな実験をしました。何かのようなもの：

<html> 
<head>
<script src="head.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery("document").ready(function() {
    console.log("ready.document");
});
</script>
...
<script type="text/javascript">
head.js("a.js", "b.js", "c.js", "test.js", function() {
        console.log("init.scripts");
        var millis = 2000;
        var date = new Date();
        var curDate = null;

        do {curDate = new Date(); } 
            while(curDate-date < millis);
        jQuery("#ddd").text(testTT);
        console.log("init.end");

});

</script>
... a lot of html content ...
<div id="ddd"></div>
...
<script type="text/javascript" >
console.log("last line");
</script>
</body>

test.js はコンソールに書き込み、 testTT を定義します。結果は次のとおりです

last line
init.testTT
init.scripts
init.end
ready.document

したがって、この単純なケース (jQuery 1.8 を使用) では、最初にロードされた *.js のコードが実行され、次に init イベントで head.js が生成され、最後に jQuery ready イベントが生成されます。したがって、JQuery が ready イベントを生成するまで待っても問題ありません。ただし、これでも問題が解決しない場合は、次の手順を実行できます。

head.js("a.js", "b.js", "c.js", function() { 
 jQuery("document").ready(function() {
      jQuery("body").trigger("your_event");
 });
});

jQuery("document").ready...*.js startでリッスンする代わりに、トリガーしているカスタム イベントをリッスンしますjQuery("body").on("your_event", handler)。

于 2012-11-22T15:19:45.097 に答える
0

関数を作成し、ドキュメント準備完了に登録します

$(document).ready(readyFunc);

readyFunction(){
   /// something to do;
}

手動で使用したい場合は、readyFunction(); を呼び出すだけです。

于 2013-12-28T15:49:34.203 に答える