事件DOMContentLoaded和load的区别
程序员文章站
2022-06-09 12:45:37
...
事件DOMContentLoaded和load的区别是,触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件。
DOM文档加载的步骤为:
1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.DOM树构建完成。//DOMContentLoaded
5.加载图片等外部文件。
6.页面加载完毕。//load
在第4步,会触发DOMContentLoaded事件;在第6步,触发load事件。
用原生js可以这么写:
// 不兼容老的浏览器,兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253),或用jQuery document.addEventListener("DOMContentLoaded", function() { // ...代码... }, false); window.addEventListener("load", function() { // ...代码... }, false);
用jQuery这么写
// DOMContentLoaded $(document).ready(function() { // ...代码... }); //load $(document).load(function() { // ...代码... });
总之,load事件:页面资源全部载入(JS,CSS,图片等全部加载完)触发;ready事件:原生无ready事件,只有DOMContentLoaded事件。jQuery中的ready事件当DOM加载完成触发,此时引用的资源未必已加载完成。所以,ready事件总是先于load事件触发。
推荐阅读
-
华为nova8和华为nova8Plus的区别哪个更值得入手
-
PHP中exec函数和shell_exec函数的区别,execshell_exec_PHP教程
-
mysql_connect localhost和127.0.0.1的区别(网络层阐述),
-
php中$_REQUEST、$_POST、$_GET的区别和联系小结_php技巧
-
css中的px、em、rem、pt 特点和区别及换算
-
IIS7 经典模式和集成模式的区别分析
-
php抽象类和接口的概念与区别
-
直接任意球和间接任意球的区别 PHP 求任意n个正负整数里面最大的连续和
-
Oracle中的Char与Varchar的区别和实例
-
光猫桥接模式和路由模式哪个更好? 桥接模式和路由模式的区别