如何仅在文档加载完成后加载 jQuery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16110963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load a jQuery function only after the document finish loading
提问by Lior Elrom
Strange situation:
奇怪的情况：
I am building a menu bar using jQueryand CSS.
In my JavaScript file, I have an on-readyfunction like so:
我正在使用jQuery和构建菜单栏CSS。
在我的 JavaScript 文件中，我有一个on-ready像这样的函数：
$(document).ready(function(e) {
mark_active_menu();
}
and...
和...
function mark_active_menu() {
var elementWidth = $("nav li").width();
alert(elementWidth);
}
For some reason, even BEFORE allthe document finish loading, I'm getting the alert message with an incorrect width. Only when I release the message, the rest of the document loads and I'm getting the right width as it should be.
出于某种原因，即使在所有文档完成加载之前，我也会收到宽度不正确的警报消息。只有当我发布消息时，文档的其余部分才会加载，并且我会得到正确的宽度。
Why my function is being called BEFORE all the document finish loading?
Is there a way to load the function only AFTER a certain element done loading (Example: the navelement)?
为什么我的函数在所有文档加载完成之前被调用？有没有办法只在某个元素完成加载后加载函数（例如：nav元素）？
回答by Adil
You can use window.load, it will be triggered after all the resource have completed loading.
您可以使用window.load，它会在所有资源加载完成后触发。
$(window).load(function(e) {
mark_active_menu();
});
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading, Reference
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子框架都加载完毕，参考
回答by Brad M
All the current solutions are just treating symptoms of the main problem. If you want your handler to execute afterall your ajax loads, then you may use a promise.
当前所有的解决方案都只是治疗主要问题的症状。如果您希望处理程序在所有 ajax 加载后执行，那么您可以使用 promise。
var ajax1 = $.ajax();
var ajax2 = $.ajax();
jQuery(function($) {
$.when.apply($, [ajax1, ajax2]).done(function() {
// your code here
});
});
回答by soyuka
Try on the window load event :
尝试窗口加载事件：
$(window).load(function() {
//Stuff here
});
回答by Mohammad Adil
To be sure, Try window load
可以肯定的是，尝试窗口 load
$(window).load(function(e) {
mark_active_menu();
}
回答by computerguy
Before(sometimes, doesn't load absolutely at the beginning, a few milliseconds after(0-200ms about)):
之前（有时，一开始不会绝对加载，几毫秒之后（大约 0-200 毫秒））：
$(document).ready(function(){
$('body').hide(0);
});
After:
后：
$(window).load(function(){
$('body').delay(500).show(0);
});
回答by Evgeniy Miroshnichenko
In my situation of work with AJAX and HTML. I have the same problem with functions $(document).ready() and $(window).load(). I solved this problem by adding handler of my event (that should work at HTML DOC), to the jQuery function that runs right after AJAX reguest was finished. Read this: " jQuery.post()"(third parameter in the function).
在我使用 AJAX 和 HTML 的情况下。我对函数 $(document).ready() 和 $(window).load() 有同样的问题。我通过将我的事件处理程序（应该在 HTML DOC 中工作）添加到在 AJAX 请求完成后立即运行的 jQuery 函数中解决了这个问题。阅读：“jQuery.post()”（函数中的第三个参数）。
In my code it looks like this:
在我的代码中，它看起来像这样：
var RequestRootFolderContent = function(){
$.post(
'PHP/IncludeFiles/FolderContent.inc.php',
function(data){
$('[class~="folder-content"]').html(data);
//Here what you need
$('[class~="file"]').dblclick(function(){
alert("Double click");
});
}
)
}
