在页面完全渲染后运行javascript

Running javascript after page is fully rendered

本文关键字：运行 javascript      更新时间：2023-09-26

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

$(myFunction);

脚本应该在页面完全呈现后执行，即使脚本尚未完成，用户也可以在页面中导航。javascript将在后台运行，因为它一个接一个地突出显示代码，同时不干扰页面的响应性。提前谢谢。

编辑:

为了更清楚，我想在所有内容"呈现"后执行代码，不是"loaded"所有内容都应该在屏幕上显示出来，用户可以看到代码变得生动起来，因为它被高亮显示。谢谢。

你是说在所有的图片都被加载之后吗?

我想是窗户。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
});

如果你还没有尝试过，9年后…

$(document).ready(function () {
    window.setTimeout('ctlEmployeeEdit.document_load()', 50);
    });

我猜如果你把你的时间设置为9毫秒，页面可能会渲染，但这只是我的假设!

窗口出现问题。onload方法

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

我的方法

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

下面是我如何解决你的问题，假设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();
        }
    }
}

不确定究竟有多少数据被带入…但是，如果在文档准备就绪时运行jquery ajax调用并使用完成的方法来运行高亮显示函数会怎样呢?如果有大量的数据，它将是一个较慢的页面加载。

无论如何都想要类似于这个

$.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请求完成时要运行的函数。希望成功能够尽早启动，以便推送数据并允许高亮显示正常工作

我知道原来的海报早就从这个10年前的问题转移了。但我希望这个答案可以帮助别人。

首先，良好的异步编程和窗口的使用。Onload可能是解决方案的重要组成部分。

我认为，我们在这里试图克服的另一个问题是，在客户端的主线程中完成了太多的工作。除了编写更高效的代码之外，我想不出任何技巧来解决这个问题。唯一的解决方案是不要在主线程上做这些工作。一种选择是在服务器上做更多的工作。

另一个选择是使用web worker将该工作放在后台线程中。你不能直接从工作线程更新DOM，但是你仍然可以做大部分的准备工作。

如果你以前从未使用过web worker，不要害怕;它们很快就能实现，假设你懂JavaScript。所有你真正需要开始的是new Worker()启动后台线程，postMessage()从主线程发送数据到工作线程(反之亦然)和onmessage事件处理程序接收数据(在任何方向)。

它就像一个纯函数，运行时不阻塞DOM，并在完成后返回数据。

下面是一个示例实现，其中有一个初始页面呈现黑色文本。与此同时，web worker决定蓝色更好，考虑了2秒钟，然后将结果报告给主线程。然后主线程在响应中更新DOM。

<body>
  <div id="cool-div"></div>
  <script>
    let myData = [
      "This is my sample data that I want to do a bunch of work to, such as parsing it and returning new html to render.",
    ];
    document.getElementById(
      "cool-div"
    ).innerHTML = `<p style="color:black">${myData}</p>`;
    const myWorker = new Worker("worker.js");
    myWorker.onmessage = (event) =>
      (document.getElementById("cool-div").innerHTML = event.data);
    myWorker.postMessage(myData);
  </script>
</body>

然后在worker.js中:

onmessage = (e) => {
  const newData = `<p style="color:blue">${e.data}</div>`;
  //pretend to do hard work, then pass the result back to main thread
  setTimeout(() => postMessage(newData), 2000);
};
相关文章：