window.onload 与 jq的$(function(){})区别
遇到一个这样的问题:当页面加载时,进行数据ajax调取,则使用了Windows.onload进行加载,则页面进入的时候会加载缓慢 或者直接就加载不上。
示例如下:
window.onload = function{
console.log("loading")
}
后来换成 jq的$(function(){}) 进行加载:
$(function () {
console.log("ready执行");
});
控制台看页面加载时两种情况分别为
这里可以看出两点不同:
1.$(function(){})
不会被覆盖,而window.onload
会被覆盖,个人感觉$(function(){})
不会被覆盖的原因是将其放入到了一个队列中,在对应时机一次出队。
2. $(function(){})
在window.onload
执行前执行的,$(function(){})
类似于原生js中的DOMContentLoaded
事件
执行时机不一样
$(function() { } )是在dom结构创建完成以后就执行,window.onload是在整个页面加载完成之后(包括页面上的资源,比如图片)才执行
执行次数不一样:
$(function() { } )不管你jsp引入的js里定义了几个,会按照顺序依次执行,而window.onload只会执行最后一个,之前的会被覆盖掉
DOM文档加载步骤:
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})
内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload