完全呈现页面后运行javascript

我正在尝试创建语法高亮显示脚本。 我尝试在一万行代码上使用我的脚本，所有我看到的是加载时的空白页面。 脚本完成任务后，所有内容都会显示出来。 顺便说一句，我在jQuery的ready函数中调用了我的脚本。

$(myFunction); 

该脚本应在页面完全呈现后执行，即使脚本尚未完成，用户也可以实际浏览页面。 javascript将在后台运行，因为它会逐个突出显示代码，同时不会干扰页面的重复性。 提前致谢。

编辑：

为了使这更清楚，我想在所有“渲染”而不是“加载”之后执行代码。 一切都应该已经在屏幕上可见，用户可以实际看到代码在突出显示时生动。 谢谢。

Answer 1

你的意思是在所有图像都已加载后？

我认为window.onload是你正在寻找的东西

 window.onload = function() { //dom not only ready, but everything is loaded }; 

编辑

根据Chris的评论，这是jQuery的方式：

 $(window).load(function() { //dom not only ready, but everything is loaded }); 

Answer 2

不确定引入了多少数据…但是如果在文档准备好了你运行jquery ajax调用并使用完成的方法运行你的荧光笔function怎么办？ 如果有大量数据，那么页面加载速度会变慢。

无论如何都想要这样

 $.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(); } }); 

complete方法指定在AJAX请求完成时要运行的函数。 希望成功将尽早发布以推送数据并让您的亮点正常工作

Answer 3

window.onload方法的问题

即使你使用$(window).load方法，你的荧光笔也可以在$(document).ready完成之前运行，因为整个地方可能有很多异步回调函数。

我的方法

我使用等待document.readyState == 'complete和setTimeout 。 我的想法是，我想等到页面完全呈现（因此'complete' ），然后进一步确保$(document).ready JQuery包装器内容已经完成（因此是setTimeout ）。

以下是我将如何解决您的问题，假设200（毫秒）是$(document).ready(function(){ /*...*/ });内所有内容的充足时间$(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(); } } }