哪个更受支持:window.onload还是document.onload?
当前回答
一般的想法是,window.onload在文档的窗口准备好显示时启动,document.onloade在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(可能是大多数当前浏览器)的可见行为。
没有文档。卸载事件。当在<body>中声明时,onload会触发两次,当在<head>中声明(此时事件充当document.onload)时会触发一次。根据计数器的状态进行计数和操作允许模拟两种事件行为。或者在HTML-<head>元素的范围内声明window.onload事件处理程序。
►示例项目:
上面的代码取自这个项目的代码库(index.html和keyboarder.js)。
有关窗口对象的事件处理程序列表,请参阅MDN文档。
其他回答
一般的想法是,window.onload在文档的窗口准备好显示时启动,document.onloade在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(可能是大多数当前浏览器)的可见行为。
没有文档。卸载事件。当在<body>中声明时,onload会触发两次,当在<head>中声明(此时事件充当document.onload)时会触发一次。根据计数器的状态进行计数和操作允许模拟两种事件行为。或者在HTML-<head>元素的范围内声明window.onload事件处理程序。
►示例项目:
上面的代码取自这个项目的代码库(index.html和keyboarder.js)。
有关窗口对象的事件处理程序列表,请参阅MDN文档。
然而,它们通常是相同的。类似地,body.onload在IE中变为window.onload。
他们什么时候开火?
窗口.卸载
默认情况下,当加载整个页面时,包括其内容(图像、CSS、脚本等),它将被激发。
在某些浏览器中,它现在取代了document.onload的角色,并在DOM就绪时启动。
文档.卸载
当DOM准备就绪时调用,可以在加载图像和其他外部内容之前调用。
他们的支持程度如何?
window.onload似乎是最受支持的。事实上,在某种意义上,一些最现代的浏览器已经用window.onload取代了document.onload。
浏览器支持问题很可能是许多人开始使用jQuery等库来处理文档就绪检查的原因,如下所示:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。window.onload与body.nload:
有一段时间,在编写论坛时也提出了类似的问题返回关于window.onload在body.onload上的用法结果似乎是您应该使用window.onload,因为它是很好地将你的结构与动作分开。
简言之
IE 6-8不支持window.onload任何现代浏览器都不支持document.onload(从不触发事件)
window.onload=()=>console.log('window.onlload-works');//解雇document.onload=()=>console.log(“document.onlload-works”);//未点火
添加事件侦听器
<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>
2017年3月更新
1香草JavaScript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
2 jQuery
$(window).on('load', function() {
console.log('All assets are loaded')
})
Good Luck.
推荐文章
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象