目录
页面加载的几种方式(原生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文档加载步骤
- 解析
html
结构 - 加载外部脚本和样式表文件
- 解析并执行脚本代码
- 构造
HTML
DOM
模型 //ready 第3,4种
- 加载图片等外文件
- 页面加载完毕 //
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元素
的高度(超出屏幕了)