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

JavaScript

飞云Tom小宇宙

2020-03-11

我正在使用<script>inside 执行外部脚本<head>。

现在，由于脚本是在页面加载之前执行的，因此我无法访问<body>。在文档“加载”后（HTML已完全下载并在RAM中），我想执行一些JavaScript。执行脚本时，是否有任何我可以挂上的事件，这些事件将在页面加载时触发？

第682篇《页面加载后如何使JavaScript执行？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答

飞云Pro 2020.03.11

use self execution onload function

window.onload = function (){
    /* statements */
}();

老丝飞云 2020.03.11

My advise use asnyc attribute for script tag thats help you to load the external scripts after page load

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

LJinJin 2020.03.11

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

Stafan小小斯丁 2020.03.11

Use this code with jQuery library, this would work perfectly fine.

$(window).bind("load", function() { 

  // your javascript event

});

小胖十三Stafan 2020.03.11

Just define <body onload="aFunction()"> that will be called after the page has been loaded. Your code in the script is than enclosed by aFunction() { }.

LEvaGreen 2020.03.11

<body onload="myFunction()">

This code works well.

But window.onload method has various dependencies. So it may not work all the time.

Eva小胖 2020.03.11

如果您使用的是jQuery，

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

相当于

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

或另一只短手：

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

请参阅JQuery $ function（）触发什么事件？和https://api.jquery.com/ready/

LLSam 2020.03.11

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

小胖Itachi西里 2020.03.11

看钩子document.onload或jQuery $(document).load(...)。

仲羽蛋蛋 2020.03.11

工作小提琴

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

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

老丝小卤蛋梅 2020.03.11

您可以在体内放置“ onload”属性

...<body onload="myFunction()">...

或者，如果您使用的是jQuery，则可以

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

希望它能回答您的问题。

请注意，$（window）.load将在页面上呈现文档后执行。

猿蛋蛋凯 2020.03.11

请记住，加载页面有多个阶段。顺便说一句，这是纯JavaScript

“ DOMContentLoaded”

当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发此事件。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和CSS的加载。

在加载DOM之后执行（在img和css之前）：

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Note: Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user requested the page, you could turn your JavaScript asynchronous and optimize loading of stylesheets

"load"

A very different event, load, should only be used to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Exectues after everything is loaded and parsed:

window.addEventListener("load", function(){
    // ....
});

MDN Resources:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

MDN list of all events:

https://developer.mozilla.org/en-US/docs/Web/Events

Pro小卤蛋 2020.03.11

这是一个基于页面加载后延迟js加载的脚本，

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

我该放在哪里？

将代码粘贴到HTML中的</body>标记之前（靠近HTML文件底部）。

它有什么作用？

该代码表示等待整个文档加载，然后加载外部文件deferredfunctions.js。

这是上述代码的示例-JS的延迟渲染

我是根据javascript pagespeed google概念的延迟加载编写的，也是从这篇文章中获得参考的。

神奇Mandy 2020.03.11

如果脚本已加载<head>到文档的中，则可以使用deferscript标记中的属性。

例：

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

来自https://developer.mozilla.org：

推迟

设置此布尔值属性是为了向浏览器指示脚本应在解析文档之后但在触发DOMContentLoaded之前执行。

如果不存在src属性（即，对于内联脚本），则不得使用此属性，在这种情况下，它将无效。

要对动态插入的脚本实现类似的效果，请改用async = false。具有defer属性的脚本将按照它们在文档中出现的顺序执行。