关于html：页面加载后执行的JavaScript

JavaScript that executes after page load

我正在执行一个外部脚本，在中使用。

现在，由于脚本在页面加载之前执行，因此我不能访问，以及其他内容。我想在文档"加载"之后执行一些javascript(HTML完全下载并在RAM中)。当脚本执行时，是否有任何可以挂接的事件会在页面加载时触发？

这些解决方案将起作用：

1	<body onloadx="script();">

或

1	document.onload = function ...

甚至

1	window.onload = function ...

请注意，最后一个选项是更好的方法，因为它是不确定的，被认为是更标准的。

相关讨论

让脚本在加载时设置要运行的函数的合理可移植、非框架方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}

相关讨论

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

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

加载DOM后的执行(IMG和CSS之前)：

1
2
3

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

"负载"

一个非常不同的事件，加载，应该只用于检测完全加载的页面。在domcontentloaded更合适的地方使用load是一个非常普遍的错误，所以要小心。

加载和分析所有内容后的执行：

1
2
3

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

多媒体资源：

https://developer.mozilla.org/en-us/docs/web/events/domcontentloadedhttps://developer.mozilla.org/en-us/docs/web/events/load

所有事件的MDN列表：

https://developer.mozilla.org/en-us/docs/web/events网站

相关讨论

您可以在主体中放置一个"onload"属性

1	...<body onloadx="myFunction()">...

或者，如果使用jquery，则可以

1
2
3
4
5

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

or

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

我希望它能回答你的问题。

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

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

例子：

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

从https://developer.mozilla.org：

defer

This Boolean attribute is set to indicate to a browser that the script
is meant to be executed after the document has been parsed, but before
firing DOMContentLoaded.

This attribute must not be used if the src
attribute is absent (i.e. for inline scripts), in this case it would
have no effect.

To achieve a similar effect for dynamically inserted scripts use
async=false instead. Scripts with the defer attribute will execute in
the order in which they appear in the document.

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12

我应该把这个放在哪里？

Paste code in your HTML just before the tag (near the bottom of your HTML file).

它是做什么的？

This code says wait for the entire document to load, then load the
external file deferredfunctions.js.

下面是上述JS代码延迟呈现的示例

我写这篇文章是基于延迟加载javascript pagespeed google的概念，也源于本文延迟加载javascript

查看挂钩document.onload或jquery $(document).load(...)。

相关讨论

工作小提琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>

function myFunction()
{
alert("Page is loaded");
}

</head>

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

谷歌推荐的最佳方法。：)

1
2
3
4
5
6
7
8
9
10
11

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

相关讨论

1
2
3
4
5

document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}

请参阅：http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

相关讨论

如果使用jquery，

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

等于

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

看到jquery$function()触发了什么事件吗？

只需定义加载页面后将调用的。脚本中的代码不是由aFunction() { }括起来的。

相关讨论

我发现有时在更复杂的页面上，并非所有元素都已由时间窗口加载。OnLoad被激发。如果是这样的话，在函数延迟之前添加setTimeout。它不优雅，但它是一个简单的黑客渲染好。

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

变成…

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

$(window).on("加载"，function()…(})；

.ready()最适合我。

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

.Load()可以工作，但它不会等到加载页面。

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

不适用于我，中断下一个内联脚本。我还将使用jquery 3.2.1和其他一些jquery分叉。

要隐藏我的网站加载覆盖，我使用以下方法：

1
2
3

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

相关讨论

1	<body onloadx="myFunction()">

这个代码工作得很好。

但window.onload方法有多种依赖关系。所以它可能不会一直工作。

使用Yui图书馆(我喜欢它)：

1
2
3

YAHOO.util.Event.onDOMReady(function(){
//your code
});

轻便漂亮！但是，如果你不把Yui用于其他东西(见其文档)，我会说它不值得使用。

注意：要使用此代码，需要导入2个脚本

1 2	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js">

有一个非常好的文档说明如何检测文档是否已使用javascript或jquery加载。

使用本机JavaScript可以实现

1
2
3

if (document.readyState ==="complete") {
init();
}

这也可以在间隔内完成

1
2
3
4
5
6

var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);

由Mozilla

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

switch (document.readyState) {
case"loading":
// The document is still loading.
break;
case"interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent ="A <span> element.";
document.body.appendChild(span);
break;
case"complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}

使用jQuery仅在DOM就绪时检查

1
2
3
4

// A $( document ).ready() block.
$( document ).ready(function() {
console.log("ready!" );
});

要检查是否加载了所有资源，请使用window.load

1
2
3

$( window ).load(function() {
console.log("window loaded" );
});

将此代码与jquery库一起使用，这将非常好地工作。

1
2
3
4
5

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

// your javascript event

});

相关讨论

我的建议是对脚本标记使用asnyc属性，它可以帮助您在页面加载后加载外部脚本。

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

相关讨论

1
2
3
4
5
6

相关讨论

正如丹尼尔所说，您可以使用document.onload。

各种javascript框架hwoever(jquery、mootools等)使用自定义事件"domready"，我想这一定更有效。如果您使用的是JavaScript，我强烈建议您开发一个框架，它们可以极大地提高您的工作效率。

相关讨论

使用自执行onload函数

1
2
3

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

相关讨论