Rob*_*cks 666 html javascript pageload dom-events
我正在使用<script>内部执行外部脚本<head>.
现在,由于脚本在页面加载之前执行,我无法访问<body>其中的内容.在文档被"加载"(HTML完全下载并在RAM中)后,我想执行一些JavaScript.我的脚本执行时是否有任何可以挂钩的事件,这些事件会在页面加载时触发？
mar*_*cgg 759
这些解决方案将有效:
<body onload="script();">
要么
document.onload = function ...
甚至
window.onload = function ...
请注意,最后一个选项是更好的方法,因为它是不显眼的,被认为是更标准的.
cha*_*aos 189
合理的可移植,非框架方式让您的脚本设置一个在加载时运行的函数:
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;
}
}
Dev*_*vWL 145
在初始HTML文档完全加载和解析后,无需等待样式表,图像和子帧完成加载,就会触发此事件.在此阶段,您可以基于用户设备或带宽速度以编程方式优化图像和css的加载.
加载DOM后的异常(在img和css之前):
document.addEventListener("DOMContentLoaded", function(){
//....
});
注意:同步JavaScript暂停解析DOM.如果您希望在用户请求页面后尽快解析DOM,您可以将JavaScript异步并优化样式表的加载
一个非常不同的事件load,应该只用于检测一个完全加载的页面.使用负载是一个非常流行的错误,其中DOMContentLoaded会更合适,所以要小心.
加载和解析所有内容后的Exectues:
window.addEventListener("load", function(){
// ....
});
MDN资源:
所有活动的MDN列表:
https://developer.mozilla.org/en-US/docs/Web/Events
Nor*_*des 116
您可以在正文中放置"onload"属性
...<body onload="myFunction()">...
或者,如果您使用的是jQuery,那么您可以这样做
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
我希望它能回答你的问题.
请注意,$(窗口).load将在页面上呈现文档后执行.
Dan*_*ice 58
如果脚本是在<head>文档中加载的,那么可以defer在脚本标记中使用该属性.
例:
<script src="demo_defer.js" defer></script>
来自https://developer.mozilla.org:
延缓
此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本.
如果src属性不存在(即对于内联脚本),则不能使用此属性,在这种情况下,它将不起作用.
要为动态插入的脚本实现类似的效果,请使用async = false.具有defer属性的脚本将按它们在文档中出现的顺序执行.
Luc*_*cky 25
这是一个基于加载页面后延迟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>
我在哪里放这个？
在
</body>标记之前(HTML文件底部附近)粘贴HTML中的代码.
它有什么作用？
此代码表示等待整个文档加载,然后加载外部文件
deferredfunctions.js.
这是上面代码的一个例子 - 推迟JS的渲染
我写了这个基于deavascript加载的javascript pagespeed google概念,也来源于本文推迟加载javascript
Dan*_*ite 19
看看挂钩document.onload或jQuery $(document).load(...).
T.T*_*dua 18
document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
注意： - 不要使用以下标记（因为它会覆盖其他同类声明）：
document.onreadystatechange = ...
Aam*_*zad 10
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
最好的方法,谷歌也推荐.:)
<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.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 () { })
我有时发现在更复杂的页面上，并非所有的元素都在window.onload被触发时加载。如果是这种情况，请在函数延迟之前添加setTimeout。它不是很优雅，但是可以很好地渲染它。
window.onload = function(){ doSomethingCool(); };
变成...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
| 归档时间： |
|
| 查看次数： |
1378293 次 |
| 最近记录： |