页面加载的几种方式和区别

目录

• 页面加载的几种方式
• DOM文档加载步骤
• 原生JS的 ready阶段 执行方法怎么写？
• 全部方式的演示代码
• window和document的区别

页面加载的几种方式（原生JS和jQuery）

• 1. window.onload = function(){}; —— 原生JS

• 2. $(window).load(function(){}); —— jQuery

• 3.$(document).ready(function(){}); —— jQuery

• 4.$(function(){}); —— jQuery

第1种：window.onload = function(){}; 第2种：$(window).load(function(){});

• 都是在页面全部加载完成（引用文件，图片等等资源都加载完毕时）执行的；
• 其中第1种：window.onload = function(){}; 只能执行一个；当有多个时，只执行最后一个；
• 而第2种：$(window).load(function(){}); 可以执行多个；

第3种：$(document).ready(function(){}); 第4种：$(function(){});

• 第4种是第3种的简写形式
• 都是在DOM元素加载完毕后便可执行的 （页面全部内容如图片等资源加载完毕前）

DOM文档加载步骤

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

原生JS的 ready阶段 执行方法怎么写？

有没有发现，上面四种方式里并没有原生JS的ready阶段执行的方式：
下面给出原生JS中：如何在DOM加载完之后执行某段代码
效果同$(document).ready(function(){});

document.addEventListener('DOMContentLoaded',function(){
	// DOM 渲染完即可执行，此时图片，视频还可能没有加载完
	console.log('原生JS： DOMContentLoaded');
},false)

第1种：window.onload = function(){}; 同理也可写为：

window.addEventListener('load', function () {
	// 页面的全部资源加载完才会执行，包括图片，视频等
	console.log('原生JS： load 1');
})

addEventListener()方法即使给同一个元素绑定了两次或多次相同类型的事件，绑定也依次触发
有关事件绑定：JS事件绑定 事件冒泡与捕获 事件代理

全部方式的演示代码

最直白的方式就是看代码啦┗( ▔, ▔ )┛

window.onload = function(){
	console.log('原生JS：window.onload 1');
}
window.onload = function() {
    console.log('原生JS：window.onload 2')
}

$(window).load(function(){
    console.log('Jquery：$(window).load() 1')
})
$(window).load(function(){
    console.log('Jquery：$(window).load() 2')
})

$(document).ready(function(){
    console.log('Jquery：$(document).ready(...) 1')
})
$(document).ready(function(){
    console.log('Jquery：$(document).ready(...) 2')
})

$(function(){
    console.log('Jquery：$(function(){}) 1')
})
$(function(){
    console.log('Jquery：$(function(){}) 2')
})


document.addEventListener('DOMContentLoaded',function(){
    // DOM 渲染完即可执行，此时图片，视频还可能没有加载完
    console.log('原生JS：监听 DOMContentLoaded');
},false)

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片，视频等
    console.log('原生JS：监听 load 1');
})

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片，视频等
    console.log('原生JS：监听 load 2');
})

输出如下：

// Jquery：$(document).ready(...) 1
// Jquery：$(document).ready(...) 2
// Jquery：$(function(){}) 1
// Jquery：$(function(){}) 2
// 原生JS：监听 DOMContentLoaded
// 原生JS：window.onload 2
// Jquery：$(window).load() 1
// Jquery：$(window).load() 2
// 原生JS：监听 load 1
// 原生JS：监听 load 2

在上面的几种方式中，分别含有window和document
那么，你知道它们的区别么？

window和document的区别

• window
  window对象表示浏览器中打开的窗口
  window对象可以省略，例如：alert() 等价于 window.alert()

• document
  document对象是window对象的一部分
  例如：document.body 等价于 window.document.body
  浏览器的html文档称为document对象（即整个页面的dom元素）

两者的区别在页面具有滚动条的时候可以直观的显示出来。
当出现垂直滚动条时：$(window).height < $(document).height;
因为window的高度始终是浏览器可视窗口的高度,而document的高度是整个页面dom元素的高度（超出屏幕了）