$(document).ready(function(){})和window.onload=function(){}的比较
这两个函数想必每个前端开发者都不会很陌生,但是很了解用法的人估计就比较少了,博主也是最近才开始注意到这两个函数的区别。
首先$(document).ready(function(){})等同于$().ready(function(){})和$(function(){}),前者貌似在官方文档中不建议使用,具体是为什么我暂时还不清楚,下面先介绍一下这两个函数的用法:用于处理DOM节点加载、图片显示以及动态资源请求。
$(document).ready(function(){...})与window.load执行顺序:$(document).ready(...)是在页面加载完所有DOM节点文档结构和jquery文件加载完成 (不然无法使用$) 后开始执行,window.onload则是在页面加载所有资源后 才开始执行。也就是说window.onload要等到所有图片,外链资源都加载完后才开始执行,也因此window.onload只允许定义一个(实际 是可以定义多个,但只有最后一个有效,相当于前面会被覆盖掉),而$(function(){...})可以允许定义多个,并且按照定义的先后顺序先后执 行。对于大部分应用情况下,$(function(){...})可以说完胜window.onload,因此其执行时间早,用户体验就更好。
另外我还想补充一点 就是在实际使用过程中因为一个js文件中可能出现多个$(document).ready(function(){}),因此要注意在其中定义的变量的作用域只是在该函数体内,并不能跨函数访问。