4

我需要优化 Web 应用程序的加载时间，该应用程序的每个 HTML 页面中都包含大量 javascript 文件。我想在一个这样的页面中尝试head.js，看看它是否会缩短加载时间。这些 JS 文件中有很多$(document).ready(callback)回调，这些回调是在加载 DOM 时调用的，而 head.js 仍在下载剩余的 JS 文件。

有没有办法告诉jQuery不要自己触发ready事件，而是让我从head.js的就绪回调中触发它？

4

3 回答 3

1

我不确定您为什么要手动触发文档就绪事件。

相反，使用 jQuery 的内置trigger&bind功能订阅和发布您自己的事件。这是最佳实践和最佳解决方案。

工作 JSFiddle 演示

于 2012-08-07T16:38:39.190 回答
0

创建一个函数将其注册到文档中

$(document).ready(readyFunc);

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

如果您想手动使用它们，只需调用 readyFunction();

于 2013-12-28T15:49:34.203 回答
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 就绪事件。所以等到 JQuery 生成就绪事件应该没问题。但是，如果这仍然是一个问题，您可以执行以下操作。

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

而不是jQuery("document").ready...在您的 *.js 中收听，而是开始收听您正在触发的自定义事件jQuery("body").on("your_event", handler)。

于 2012-11-22T15:19:45.097 回答