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

最新推荐文章于 2021-05-26 17:25:37 发布

转载最新推荐文章于 2021-05-26 17:25:37 发布 · 396 阅读

文章标签：

#javascript

前端专栏收录该内容

27 篇文章

订阅专栏

本文探讨了jq中的$(function(){}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一直在研究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执行');
}

我们来看一下控制台中输出的结果：

 ready执行
 ready1执行
 ready执行

这里可以看出两点不同：
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

document.ready和onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件：

一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

1、Dom Ready

用jQ的人很多人都是这么开始写脚本的：

$(function(){ 
      // do something 
});

例如：

$(function() {
     $("a").click(function() {
           alert("Hello world!");
      });
})

这个例子就是给所有的a标签都绑定了一个click事件。即当所有链接被鼠标单击的时候，都执行

 alert("Hello World!");

(自己的理解)也就是说页面加载时绑定，真正该触发时触发。
其实这个就是jq ready()的简写，他等价于：

$(document).ready(function(){
     //do something
})

或者下面这个方法，jQuer的默认参数是：“document”；

$().ready(function(){
    //do something
})

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情，比如：

window.onload=function(){
      //do something
}

或者经常用到的图片，假设这个

document.getElementById("imgID").onload=function(){
     //do something
}

这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；
Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；
比如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片下我们可以直接在上加个宽度或者高度的属性

<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>

或者可以在css样式中加宽度或者高度的属性（推荐）。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min- height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，但是ie6除非是抛弃性能问题用css表达式（当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/) 有关于css表达式性能问题的解决方案,大家可以看一下）。这个时候ie的最好解决方案就是用Dom Ready而不是Dom Load，因为通常大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的非常明显，用Dom Load，通常是先把页面撑开，加载完成后再把图片重设宽高，图片加载多少时间，这个页面就会撑开多久，用户会非常难受！！

window.onload

当一个文档完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。
他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。