jq的$(function(){})与window.onload的区别

Posted yu412

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq的$(function(){})与window.onload的区别相关的知识,希望对你有一定的参考价值。

 
最近一直在研究jq的源码,书写jq的代码我们通常会包裹在一个$(function())函数中,
jq的$(function())也就是$(document).ready(function())的简写,与之对应的原生js的window.onload事件,这俩者之间到底有什么区别呢?

$(function () 
    console.log("ready执行");
);

$(function() 
    console.log("ready1执行");
);

window.onload = function () 
    console.log(‘load执行‘);
;
window.onload = function () 
    console.log(‘load1执行‘);

 

 

我们来看一下控制台中输出的结果: 
技术图片 

这里可以看出两点不同: 
1.$(function())不会被覆盖,而window.onload会被覆盖,个人感觉$(function())不会被覆盖的原因是将其放入到了一个队列中,在对应时机一次出队。 
2. $(function())window.onload执行前执行的,$(function())类似于原生js中的DOMContentLoaded事件,在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档加载步骤: 
1.解析html结构 
2.加载外部的脚本和样式文件 
3.解析并执行脚本代码 
4.执行$(function())内对应代码 
5.加载图片等二进制资源 
6.页面加载完毕,执行window.onload

以上是关于jq的$(function(){})与window.onload的区别的主要内容,如果未能解决你的问题,请参考以下文章

jq手写碰撞小球

js & jq 加载js

图片延迟加载(用jq自己写的方法)

jq微信分享

DOM事件节点jq

JQ 取窗口的宽度.窗口的框度历