页面完全渲染后运行javascript

我正在尝试创建语法突出显示器脚本。我试着在一行代码上使用我的脚本，并且在加载时看到的只是一个空白页面。脚本完成任务后，所有内容都会显示出来。顺便说一下，我在jQuery的ready函数中调用了我的脚本。页面完全渲染后运行javascript

$(myFunction);

脚本应该执行后的页面完全呈现，用户可以通过即使脚本尚未完成的页面居然导航。 JavaScript将在后台运行，因为它会逐一突出显示代码，而不会干扰页面的响应。提前致谢。

编辑：

为了使这更清楚，我想后，一切都变得“”而不是“装”来执行代码。一切应该已经可以在屏幕上看到，而且用户可以真正看到代码在被突出显示的时候生动起来。谢谢。

来源

2011-12-23 Randal Cunanan

该代码片段用于DOM何时可以被操作，而不是每个资源已经加载。不幸的是，我不知道有没有明确的，没有错误的方法来检查每个元素是否已经加载。 – nickjyc 2011-12-23 02:44:23

[如何在页面完全呈现时执行Javascript函数？]（http://stackoverflow.com/questions/939538/how-do-you-execute-a-javascript-function-when-the已完全呈现的页面） – JosephStyons 2011-12-23 16:51:15

您应该在脚本标记，webworkers和onload事件中使用async来创建webworkers。 – 2014-03-06 04:25:04

你的意思是毕竟图像已经加载？

我觉得window.onload是你在找什么

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

编辑

每克里斯的评论，这里的jQuery的方式：

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

来源

2011-12-23 02:46:55

这样做的jQuery方法是$（window）.load（function（）{...}）; – ChrisM 2011-12-23 02:51:32

谢谢@ChrisM - +1 :) – 2011-12-23 02:52:50

该解决方案无法正常工作。页面仍然是空白，而JavaScript正在加载。其他解决方案？我编辑了我的帖子以强调我想要发生的事情。谢谢。 – 2011-12-23 03:21:45

不知道到底有多少数据正在被引入......但是如果在文档准备好的情况下运行了jquery ajax调用并使用完成的方法运行hig荧光笔功能？如果有大量数据，它将会减慢页面加载速度。

反正想与此类似

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

完整方法指定了一个AJAX请求完成时要运行的功能。希望成功能够尽早触发数据并让您的突出显示正常工作

来源

2011-12-23 03:42:52 afreeland

嗨，要突出显示的代码已经在pre标签中所包含的页面。 – 2011-12-23 04:39:56

这样做的一种简单方法是引入延迟。使用setTimeout（）来实现这一点。例如：setTimeout（func，1000）;

上述行在等待1000毫秒后执行函数“func”。根据加载内容所用的时间，在setTimeout中设置时间域（参数）。

用法示例：

$(document).ready(function(){ 

function func() 
{ 
    alert("hi"); 
} 
setTimeout(func, 1000); 
});

希望这有助于！

来源

2016-02-23 22:03:48

你如何可以授予该页面将在1000毫秒后加载？所以，更好的选择是使用window.load函数 – 2016-11-11 10:18:06

问题的办法的window.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(); 
     } 
    } 
}

来源

2017-07-07 22:17:08 synaptik

页面完全渲染后运行javascript

回答

相关问题