jQuery + head.js：如何从head.js的内部回调中手动触发$（document）.ready（）？
[英]jQuery + head.js: How to trigger $(document).ready() manually from inside ready callback of head.js?
问题描述
I need to optimize the load time of a web application which contains lots of javascript files included in each of it's HTML pages. 
我需要优化Web应用程序的加载时间，该应用程序包含每个HTML页面中包含的大量javascript文件。 I want to try head.js in one such page to see if it improves load time. 我想在一个这样的页面中尝试head.js ，看看它是否会改善加载时间。 There are lots of $(document).ready(callback) callbacks in those JS files which are invoked when DOM is loaded while head.js is still downloading remaining JS files. 这些JS文件中有很多$(document).ready(callback)回调函数，这些函数在加载DOM时调用，而head.js仍在下载剩余的JS文件。
Is there a way I could tell jQuery not to trigger ready event on its own, rather let me trigger it from inside the ready callback of head.js? 有没有办法告诉jQuery不要自己触发ready事件，而是让我从head.js的ready回调中触发它？
3 个解决方案
解决方案1
1 2012-08-07 16:38:39
I am unsure as to why you'd want to trigger the document ready event manually. 我不确定您为什么要手动触发文档就绪事件。
Instead, subscribe and publish your own events using jQuery's built-in trigger & bind functionality. 相反，使用jQuery的内置trigger和bind功能订阅和发布您自己的事件。 This is best practice and the optimal solution. 这是最佳实践和最佳解决方案。
解决方案2
0 2012-11-22 15:19:45
I have made a small experiment. 我做了一个小实验。 Something like: 就像是：
<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>
The test.js writes to console and defines testTT . test.js写入控制台并定义testTT 。 The result is following 结果如下
last line
init.testTT
init.scripts
init.end
ready.document
Thus, in this simple case (using jQuery 1.8), first the code in loaded *.js is executed then head.js on init event is generated, finally jQuery ready event is generated. 因此，在这个简单的情况下（使用jQuery 1.8），首先执行加载的* .js中的代码，然后生成init事件上的head.js，最后生成jQuery ready事件。 So it should be fine to wait until JQuery generates ready event. 所以等到JQuery生成就绪事件应该没问题。 However if this is still an issue you could do the following. 但是，如果这仍然是一个问题，您可以执行以下操作。
head.js("a.js", "b.js", "c.js", function() {
jQuery("document").ready(function() {
jQuery("body").trigger("your_event");
});
});
and instead of listening to jQuery("document").ready... in your *.js start listen to the custom event you are triggering jQuery("body").on("your_event", handler) . 而不是听jQuery("document").ready...在你的* .js中开始听你正在触发jQuery("body").on("your_event", handler)的自定义事件。
解决方案3
0 2013-12-28 15:49:34
create a function register it in document ready 创建一个函数在文档就绪中注册它
$(document).ready(readyFunc);
readyFunction(){
/// something to do;
}
if you like to use them manually, just need call the readyFunction(); 如果你想手动使用它们，只需要调用readyFunction（）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.