一般来说页面加载完成有两种事件
1: load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数,
缺点:问题是如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响
2:$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行,
在原生的jS中不包括ready()这个方法,只有load方法就是onload事件
$(document).ready和window.onload的区别:
$(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大。
$(document).ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。 意思就是DOM树加载完毕,就执行,不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
window.onload:是页面所有元素都加载完毕,包括图片等所有元素。只能执行一次。
所以,$(document).ready的执行时间要早于window.onload。并且可以写多个。
window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数
<script>
//页面载入-(dom-css-js-图片-视频等所有资源加载完成)执行
//整个页面中只能执行一次
window.onload = function(){
console.log("aaa");
};
window.onload = function(){
console.log("bbbb");
};
//页面 载入----(只要dom加载完成就会执行)
//可以执行多次
$(document).ready(function(){
console.log("jq-aaaaa")
});
//简写版
$(function(){
console.log("jq-bbbb")
});
</script>
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) , (document).ready(function(){}), (document).ready(function()),().ready(function(){})和$(function(){}) 三者区别
最完整的写法是:$(document).ready(function(){})
ready() 函数仅能用于当前文档,因此无需选择器。
所以document选择器可以不要,那么就可以写成:
(
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
最
后
().ready(function(){}) 最后
().ready(function())最后的默认事件就是ready,所以,ready也可以省略,写成:
$(function(){});