哪个得到更广泛的支持:或?window.onload
document.onload
window.onload
在某些浏览器中,它现在接管了 的角色,并在 DOM 准备就绪时触发。document.onload
document.onload
window.onload
似乎是最广泛支持的。事实上,一些最现代的浏览器在某种意义上已经替换为 .document.onload
window.onload
浏览器支持问题很可能是许多人开始使用 jQuery 等库来处理文档是否准备就绪的检查的原因,如下所示:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。 与:window.onload
body.onload
不久
前,在编码论坛上提出了一个类似的问题,关于 over 的使用。
结果似乎是您应该使用,因为将您的结构与操作分开是
件好事。window.onload
body.onload
window.onload
一般的想法是,window.onload 在文档窗口准备好进行演示时触发,document.onload 在 DOM 树(从文档中的标记代码构建)完成时触发。
理想情况下,订阅 DOM 树事件允许通过 Javascript 进行屏幕外操作,几乎不会产生 CPU 负载。相反,window.onload
可能需要一段时间才能触发,当尚未请求、解析和加载多个外部资源时。
►测试场景:
要观察差异以及您选择的浏览器如何实现上述事件处理程序,只需在文档的 – – 标记中插入以下代码即可。<body>
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►结果:
以下是结果行为,Chrome v20(可能还有大多数最新的浏览器)都可以观察到。
document.onload
onload
在 内声明时触发两次,在 内声明时触发一次(事件随后充当 )。<body>
<head>
document.onload
window.onload
<head>
►示例项目:
上面的代码取自该项目的代码库(和)。index.html
keyboarder.js
有关窗口对象的事件处理程序列表,请参阅 MDN 文档。
添加事件侦听器
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/*
- Code to execute when only the HTML document is loaded.
- This doesn't wait for stylesheets,
images, and subframes to finish loading.
*/
});
</script>
Update March 2017
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
祝你好运。
模板简介:该模板名称为【window.onload和document.onload那个用的更多?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。