如何使JavaScript页面加载后执行?

我正在执行一个外部脚本，使用<脚本>内<头>。

现在，由于脚本在页面加载之前执行，我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件，我可以挂钩到当我的脚本执行，这将在页面加载触发?

当前回答

$(window).on("load", function(){ ... });

.ready()最适合我。

$(document).ready(function(){ ... });

.load()将工作，但它不会等到页面加载。

jQuery(window).load(function () { ... });

对我不起作用，破坏了下一个内联脚本。我也使用jQuery 3.2.1以及一些其他的jQuery叉子。

隐藏我的网站加载覆盖，我使用以下:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

2018-03-08 02:42:57

其他回答

如果脚本是在文档的<head>中加载的，那么可以在script标记中使用defer属性。

例子:

<script src="demo_defer.js" defer></script>

从https://developer.mozilla.org:

推迟此布尔属性被设置为向浏览器指示脚本意味着在解析文档之后执行，但在解析之前发射DOMContentLoaded。内如果src 属性不存在(即对于内联脚本)，在这种情况下它会没有效果。为实现动态插入脚本使用的类似效果异步= false。具有defer属性的脚本将在它们在文档中出现的顺序。

2014-01-10 08:52:41

Working Fiddle on <body onload="myFunction()" >

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>

2013-03-26 09:39:35

我建议使用asnyc属性的脚本标签，这有助于你加载页面加载后的外部脚本

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

2015-03-30 05:43:37

我发现有时在更复杂的页面上，并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况，在函数延迟片刻之前添加setTimeout。它不是优雅的，但它是一个简单的hack渲染良好。

window.onload = function(){ doSomethingCool(); };

变得……

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

2013-07-20 21:13:54

这些解决方案是有效的:

正如注释中提到的，使用defer:

<script src="deferMe.js" defer></script>

<body onload="script();">

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选项是更好的方法，因为它不引人注目，而且被认为更标准。

2009-04-30 16:41:16

如何使JavaScript页面加载后执行?

推荐文章

最新文章

标签