我正在使用<script>
inside 执行外部脚本<head>
。
现在,由于脚本是在页面加载之前执行的,因此我无法访问<body>
。在文档“加载”后(HTML已完全下载并在RAM中),我想执行一些JavaScript。执行脚本时,是否有任何我可以挂上的事件,这些事件将在页面加载时触发?
我正在使用<script>
inside 执行外部脚本<head>
。
现在,由于脚本是在页面加载之前执行的,因此我无法访问<body>
。在文档“加载”后(HTML已完全下载并在RAM中),我想执行一些JavaScript。执行脚本时,是否有任何我可以挂上的事件,这些事件将在页面加载时触发?
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>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>
Use this code with jQuery library, this would work perfectly fine.
$(window).bind("load", function() {
// your javascript event
});
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() { }
.
<body onload="myFunction()">
This code works well.
But window.onload
method has various dependencies. So it may not work all the time.
如果您使用的是jQuery,
$(function() {...});
相当于
$(document).ready(function () { })
或另一只短手:
$().ready(function () { })
<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
看钩子document.onload
或jQuery $(document).load(...)
。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
您可以在体内放置“ onload”属性
...<body onload="myFunction()">...
或者,如果您使用的是jQuery,则可以
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
希望它能回答您的问题。
请注意,$(window).load将在页面上呈现文档后执行。
当初始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
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:
这是一个基于页面加载后延迟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概念的延迟加载编写的,也是从这篇文章中获得参考的。
如果脚本已加载<head>
到文档的中,则可以使用defer
script标记中的属性。
例:
<script src="demo_defer.js" defer></script>
来自https://developer.mozilla.org:
推迟
设置此布尔值属性是为了向浏览器指示脚本应在解析文档之后但在触发DOMContentLoaded之前执行。
如果不存在src属性(即,对于内联脚本),则不得使用此属性,在这种情况下,它将无效。
要对动态插入的脚本实现类似的效果,请改用async = false。具有defer属性的脚本将按照它们在文档中出现的顺序执行。
use self execution onload function