我应该什么时候使用 jQuery 的 document.ready 函数? [英] When should I use jQuery's document.ready function?
问题描述
当我第一次开始使用 Javascript/jQuery 时，有人告诉我使用 document.ready，但我从来没有真正了解原因.
I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.
是否有人可以提供一些基本的指导方针，说明什么时候将 javascript/jquery 代码包装在 jQuery 的 document.ready 中是有意义的?
Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's document.ready?
我感兴趣的一些主题:
- jQuery 的
.on()方法:我在 AJAX 中使用了相当多的.on()方法(通常在动态创建的 DOM 元素上)..on()点击处理程序是否应该总是insidedocument.ready? - 性能:将各种 javascript/jQuery 对象保持在 inside 或 outside document.ready 是否性能更高(另外，性能差异是否显着?)?
- 对象范围:AJAX 加载的页面无法访问内部前一个页面的文档的对象.准备好，对吗?他们只能访问外部 document.ready 的对象(即真正的全局"对象)?
- jQuery's
.on()method: I use the.on()method for AJAX quite a bit (typically on dynamically created DOM elements). Should the.on()click handlers always be insidedocument.ready? - Performance: Is it more performant to keep various javascript/jQuery objects inside or outside document.ready (also, is the performance difference significant?)?
- Object scope: AJAX-loaded pages can't access objects that were inside the prior page's document.ready, correct? They can only access objects which were outside document.ready (i.e., truly "global" objects)?
更新:为了遵循最佳实践，我所有的 javascript(jQuery 库和我的应用程序代码)都在我的 HTML 页面的底部，我正在使用将 defer 属性添加到我的 AJAX 加载页面上包含 jQuery 的脚本上，以便我可以访问这些页面上的 jQuery 库.
Update: To follow a best practice, all my javascript (the jQuery library and my app's code) is at the bottom of my HTML page and I'm using the defer attribute on the jQuery-containing scripts on my AJAX-loaded pages so that I can access the jQuery library on these pages.
推荐答案
简单来说，
$(document).ready 是一个事件，当 document 为准备好了.
$(document).readyis an event which fires up whendocumentis ready.
假设您已将 jQuery 代码放在 head 部分并尝试访问 dom 元素(锚点、img 等)，您将无法访问这是因为 html 是从上到下解释的，并且当您的 jQuery 代码运行时，您的 html 元素不存在.
Suppose you have placed your jQuery code in head section and trying to access a dom element (an anchor, an img etc), you will not be able to access it because html is interpreted from top to bottom and your html elements are not present when your jQuery code runs.
为了克服这个问题，我们将每个 jQuery/javascript 代码(使用 DOM)放在 $(document).ready 函数中，当所有 dom 元素可以访问.
To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside $(document).ready function which gets called when all the dom elements can be accessed.
这就是原因，当您将 jQuery 代码放在底部时(在所有 dom 元素之后，就在 </body> 之前)，不需要 $(document).ready
And this is the reason, when you place your jQuery code at the bottom (after all dom elements, just before </body>) , there is no need for $(document).ready
只有在 document 上使用 因为我上面解释的原因相同.on 方法时，才需要在 $(document).ready 中放置 on 方法
There is no need to place on method inside $(document).ready only when you use on method on document because of the same reason I explained above.
//No need to be put inside $(document).ready
$(document).on('click','a',function () {
})
// Need to be put inside $(document).ready if placed inside <head></head>
$('.container').on('click','a',function () {
});
编辑
来自评论，
$(document).ready不等待图像或脚本.这就是$(document).ready和$(document).load
$(document).readydoes not wait for images or scripts. Thats the big difference between$(document).readyand$(document).load
只有访问 DOM 的代码才应该在就绪处理程序中.如果是插件，就不应该出现在 ready 事件中.
Only code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.
这篇关于我应该什么时候使用 jQuery 的 document.ready 函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
