关于文档加载的方法

Posted 2020-09-09

怎么排版啊啊啊。。。

1、首先用的最多的jQuery中有3种针对文档加载的方法

1 $(document).ready(function() {
2     // ...代码...
3 })

//document ready 简写
$(function() {
    // ...代码...
})

$(document).load(function() {
    // ...代码...
})

其中第二种是第一种的简写方式。

.ready和.load区别

先了解DOM文档加载的步骤：　　

(1) 解析html结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

可见.ready在第4步的时候已经执行，而在第6步时才触发.load事件。即.ready事件先执行。

2、javascript针对文档加载的方法

1 //支持IE9及以上
2 <script>
3   document.addEventListener("DOMContentLoaded", function(event) {
4     console.log("DOM fully loaded and parsed");
5   });
6 </script>

1 window.addEventListener("load", function() {
2     // ...代码...
3 }, false);

DOMContentLoaded 和 onload

DOMContentLoaded    当初始HTML文档已经完成加载和解析时，而无需等待样式表，图像和子帧的完全加载。——MDN

onload    事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

可见onload效果类似JQuery中.load()方法。

具体DOMContentLoaded兼容及加载不解释。可参考http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html?utm_source=tuicool&utm_medium=referral