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

posted @ 2017-01-18 12:51  Gaochunling  阅读(244)  评论(0编辑  收藏  举报