jquery 在完全呈现页面后运行javascript

s6fujrry 于 2022-11-03 发布在 jQuery

关注(0)|答案(5)|浏览(122)

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

$(myFunction);

脚本应该在页面完全呈现后执行，即使脚本还没有完成，用户也可以在页面中导航。JavaScript将在后台运行，因为它会逐个突出显示代码，而不会影响页面的响应。提前感谢。
编辑：
为了更清楚地说明这一点，我希望在所有内容都“呈现”而不是“加载”之后执行代码。所有内容都应该在屏幕上可见，用户可以看到代码在被突出显示时变得生动起来。谢谢。

jquery

来源：https://stackoverflow.com/questions/8611713/running-javascript-after-page-is-fully-rendered

5条答案

按热度按时间

pcrecxhr1#

你的意思是在所有的图像都被加载之后吗？
我想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
});

赞(0）回复(0）举报 2022-11-03

4uqofj5v2#

如果你还没试过九年后。

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

我猜如果你把时间设置为9年的毫秒，页面可能已经呈现了，但这只是我的假设！

赞(0）回复(0）举报 2022-11-03

cyvaqqii3#

窗口出现问题.onload方法

即使您使用$(window).load方法，您的highlighter内容 * 也可能 * 在$(document).ready完成之前运行，因为可能到处都有许多异步回调函数。
"我的方法"
我使用了等待document.readyState == 'complete和setTimeout的组合，其思想是我希望等待页面完全呈现（因此使用了'complete'），然后进一步确保$(document).ready JQuery Package 器内容已经完成（因此使用了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();
        }
    }
}

赞(0）回复(0）举报 2022-11-03

qybjjes14#

我知道最初的发帖者早就不想再提这个十年前的问题了，但我希望这个答案能帮助到一些人。
首先，良好的异步编程和window.onload的使用可能是解决方案的重要组成部分，具体的实现会有所不同。
我认为，我们在这里要克服的另一个问题是，客户端的主线程中完成了太多的工作。除了编写更高效的代码之外，我想不出任何方法来解决这个问题。唯一的解决方案是不在主线程中完成这些工作。一个选择是在服务器上完成更多的工作。
另一种选择是使用web worker将该工作放在后台线程中，您不能直接从工作线程更新DOM，但您仍然可以完成大部分准备工作。
如果您以前从未使用过Web工作者，请不要被吓倒;您真正需要的是new Worker()来启动一个后台线程，postMessage()用来将数据从主线程发送到工作线程（反之亦然），以及onmessage事件处理程序用来接收数据（在两个方向上）。
它就像一个纯函数，运行时不会阻塞DOM，并在完成时用数据回调。
下面是一个示例实现，其中初始页面呈现为黑色文本。与此同时，web工作者决定蓝色更好，考虑了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);
};

赞(0）回复(0）举报 2022-11-03

x8goxv8g5#

不确定到底有多少数据被带入...但是如果在document ready上运行一个jquery AJAX 调用并使用completed方法来运行highlighter函数会怎么样？如果有很多数据，页面加载速度会变慢。
总之想类似于这个

$.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 请求完成时要运行的函数。

赞(0）回复(0）举报 2022-11-03

我来回答

jquery 在完全呈现页面后运行javascript

5条答案

相关问题

热门标签

最新问答