在页面完全呈现后运行 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8611713/
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
Running javascript after page is fully rendered
提问by Randal Cunanan
I am trying to create a syntax highlighter script. I tried using my script on a code with 10 thousand lines and all I see is a blank page while it is loading. Everything will just show up after the script has finished it's task. By the way, I called my script inside the ready function of jQuery.
我正在尝试创建一个语法荧光笔脚本。我尝试在具有 10,000 行的代码上使用我的脚本，但在加载时我看到的只是一个空白页面。脚本完成任务后，一切都会显示出来。顺便说一下，我在 jQuery 的 ready 函数中调用了我的脚本。
$(myFunction);
The script should execute after the page is fully rendered and the user can actually navigate through the page even if the script is not yet finished. The javascript will run in the background as it highlights the code one by one while not interfering the reponsiveness of the page. Thanks in advance.
脚本应在页面完全呈现后执行，即使脚本尚未完成，用户也可以实际浏览页面。javascript 将在后台运行，因为它会一一突出显示代码，同时不影响页面的响应性。提前致谢。
EDIT:
编辑：
To make this clearer, I would like to execute the code after everything is "rendered" not "loaded". Everything should already visible in the screen and the user can actually see the code come to life as it is being highlighted. Thanks.
为了更清楚地说明这一点，我想在一切都“渲染”而不是“加载”之后执行代码。一切都应该已经在屏幕中可见，用户可以实际看到代码在高亮显示时栩栩如生。谢谢。
回答by Adam Rackis
Do you mean after all the images have been loaded?
你的意思是在所有图像都加载之后？
I think window.onloadis what you're looking for
我认为window.onload就是你要找的
window.onload = function() {
//dom not only ready, but everything is loaded
};
EDIT
编辑
Per Chris's comment, here's the jQuery way:
根据 Chris 的评论，这是 jQuery 方式：
$(window).load(function() {
//dom not only ready, but everything is loaded
});
回答by synaptik
Problem with window.onload approaches
window.onload 方法的问题
Even if you use the $(window).loadapproach, your highlighter stuff couldget run prior to something from $(document).readycompleting, since there may be lots of asynchronous callback functions all over the place.
即使您使用该$(window).load方法，您的荧光笔内容也可能会在某些事情$(document).ready完成之前运行，因为可能到处都有很多异步回调函数。
My approach
我的方法
I use a combination of waiting for document.readyState == 'completeand setTimeout. The idea is that I want to wait until the page is fully rendered (hence the 'complete') and then further ensure that the $(document).readyJQuery wrapper content has completed (hence the setTimeout).
我使用了等待document.readyState == 'complete和的组合setTimeout。这个想法是我想等到页面完全呈现（因此是'complete'），然后进一步确保$(document).readyJQuery 包装器内容已经完成（因此是setTimeout）。
Here's how I would solve your problem, assuming that 200 milliseconds is ample time for everything inside $(document).ready(function(){ /*...*/ });to complete.
这是我将如何解决您的问题，假设 200 毫秒是$(document).ready(function(){ /*...*/ });完成内部所有内容的充足时间。
function highlighterAction() {
// actually do the highlighting stuff here
}
function highlighter() {
/*
The short pause allows any required callback functions
to execute before actually highlighting, and allows
the JQuery $(document).ready wrapper to finish.
*/
setTimeout(function() {
highlighterAction();
}, 200);
}
/*
Only trigger the highlighter after document fully loaded. This is
necessary for cases where page load takes a significant length
of time to fully load.
*/
if (document.readyState == 'complete') {
highlighter();
} else {
document.onreadystatechange = function () {
if (document.readyState === "complete") {
highlighter();
}
}
}
回答by Todd Harvey
in case you didn't try this yet, 9 years later …
如果您还没有尝试过，9 年后……
$(document).ready(function () {
window.setTimeout('ctlEmployeeEdit.document_load()', 50);
});
I guess if you set your time out to 9 years of milliseconds, the page will probably have rendered, but that's just my hypothesis!
我想如果您将时间设置为 9 毫秒，页面可能会呈现，但这只是我的假设！
回答by afreeland
Not sure exactly how much data is being brought in...but what if on document ready you ran a jquery ajax call and used the completed method to run your highlighter function? If there is a lot of data it will be a slower page load.
不确定到底有多少数据被引入……但是如果在文档准备好时你运行了一个 jquery ajax 调用并使用完成的方法来运行你的荧光笔功能呢？如果有很多数据，页面加载速度会变慢。
Anyways would like similar to this
无论如何都希望与此类似
$.ajax({
type: "POST",
url: "Where data is actually stored",
data: { ChannelTypeID: ChannelTypeID },
datatype: "html",
beforeSend: function () {
},
success: function (myHTML) {
$('body').html(myHTML);
},
error: function () {
alert("Ajax request was unsuccessful");
},
complete: function () {
highlighterFunction();
}
});
The complete method specifies a function to be run when an AJAX request completes. Hopefully the success will fire early enough to push the data and allow your highlight to work properly
complete 方法指定在 AJAX 请求完成时要运行的函数。希望成功会早点触发以推动数据并让您的亮点正常工作
