Question

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

$(myFunction);

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

编辑：

为了使这个更清楚，我希望在所有内容被执行后执行代码＆＃34;没有＆＃34;加载＆＃34;。一切都应该已经在屏幕上可见，用户实际上可以看到代码在突出显示时变得生动。感谢。

Answer 1

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

我认为window.onload正是您正在寻找的

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

修改

Per Chris的评论，这是jQuery方式：

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

Answer 2

window.onload接近问题

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

我的方法

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

以下是我将如何解决您的问题，假设$(document).ready(function(){ /*...*/ });内的所有内容都需要200毫秒才能完成。

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

Answer 3

如果9年后您还没有尝试过此方法...

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

我想如果您将时间设置为9毫秒，则该页面可能已经呈现，但这只是我的假设！

Answer 4

不确定引入了多少数据......但是如果在文档就绪时你运行了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请求完成时要运行的函数。希望成功将尽早发布以推送数据并让您的亮点正常工作

完全呈现页面后运行javascript

4 个答案: