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

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

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

飞云Pro2020/03/11 12:35:28

use self execution onload function

window.onload = function (){
    /* statements */
}();   
老丝飞云2020/03/11 12:35:28

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>
LJinJin2020/03/11 12:35:28

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

// your javascript event here

});
</script>

Stafan小小斯丁2020/03/11 12:35:28

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

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

  // your javascript event

});
小胖十三Stafan2020/03/11 12:35:28

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

LEvaGreen2020/03/11 12:35:28
<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 12:35:28

如果您使用的是jQuery,

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

相当于

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

或另一只短手:

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

请参阅JQuery $ function()触发什么事件?https://api.jquery.com/ready/

LLSam2020/03/11 12:35:28
<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 12:35:28

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

仲羽蛋蛋2020/03/11 12:35:28

工作小提琴

<!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 12:35:28

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

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

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

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

or 

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

希望它能回答您的问题。

请注意,$(window).load将在页面上呈现文档后执行。

猿蛋蛋凯2020/03/11 12:35:28

请记住,加载页面有多个阶段。顺便说一句,这是纯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 12:35:28

这是一个基于页面加载后延迟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概念的延迟加载编写的,也是从这篇文章中获得参考的。

神奇Mandy2020/03/11 12:35:28

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

例:

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

来自https://developer.mozilla.org

推迟

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

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

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

凯达蒙2020/03/11 12:35:28

这些解决方案将起作用:

<body onload="script();">

要么

document.onload = function ...

甚至

window.onload = function ...

请注意,最后一个选项是更好的选择,因为它不引人注目并且被认为是更标准的