JQ中$(window).load和$(document).ready区别与执行顺序

JQ中的$(document).ready()大家应该用的非常多，基本每个JS脚本中都有这个函数的出现有时甚至会出现多个，那么另一个加载函数$(window).load相对出现的次数就很少了，下面为大家介绍一下两者的区别与他们的执行顺序

一般情况下一个页面响应加载的基本顺序是：域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息。
那么我们在编写JS脚本时什么情况下使用$(document).ready()又在什么情况下使用$(window).load呢，我们先来了解一下两者的功能

一、$(document).ready()

从字面的意思上理解，就是文档准备好了。也就是浏览器已经加载并解析完整个html文档，dom树已经建立起来了,然后执行此函数

原生JavaScript中的写法如下：

document.ready=function(){
 alert("ready"); 
}

jQuery中的写法如下：

$(document).ready(function(){
 alert("ready");
});

或

$(function(){
 alert("ready");
});

二、$(window).load

在网页中所有元素(包括页面中图片,css文件等所有关联文件)完全加载到浏览器后才执行

原生JavaScript中的写法如下：

window.onload = function(){ 
 alert("onload"); 
};

jQuery中的写法如下：

$(window).load(function(){
 alert("onload");
});

两者的区别在于：

1.执行时间不同

$(document).ready()是在页面完成HTML的加载并建立了DOM树之后就开始执行，但这并不代表页面的所

有数据已经全部加载完成，一些大的图片有会在建立DOM树之后很长一段时间才行加载完成，而

$(window).load()就是整个页面已经加载完毕后才执行，包括图片等一些关联文件。

2.可以被执行的次数不同

$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

3.执行的效率不同

如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行

总结一下就是：$(window).load()在$(document).ready之后执行，且页面中所有内容全部加载完成后才会执行，两者的使用时机一目了然，大家可以自行决定。

# ready与load区别  # 执行顺序  # jquery $(document).ready() 与window.onload的区别  # JQuery onload、ready概念介绍及使用方法  # jquery的$(document).ready()和onload的加载顺序  # jquery中的$(document).ready()与window.onload的区别  # 解析页面加载与js函数的执行 onload or ready  # 一张表格告诉你windows.onload()与$(document).ready()的区别  # JQuery的ready函数与JS的onload的区别详解  # 浅析document.ready和window.onload的区别讲解  # jQuery中document与window以及load与ready 区别详解  # 加载  # 多个  # 才会  # 才行  # 后才  # 情况下  # 他们的  # 文档  # 是在  # 都有  # 来了  # 执行时间  # 会在  # 要在  # 将被  # 要比  # 但这  # 很长  # 并不代表  # 建立起 

相关文章： 如何在云虚拟主机上快速搭建个人网站？  如何在阿里云ECS服务器部署织梦CMS网站？  网站企业制作流程,用什么语言做企业网站比较好？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  ,巨量百应是干嘛的？  如何快速搭建响应式可视化网站？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  南宁网站建设制作定制,南宁网站建设可以定制吗？  制作网页的网站有哪些,电脑上怎么做网页？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  Python如何创建带属性的XML节点  ,怎么在广州志愿者网站注册？  建站主机如何选？高性价比方案全解析  如何选择美橙互联多站合一建站方案？  网站制作公司,橙子建站是合法的吗？  黑客入侵网站服务器的常见手法有哪些？  建站之星如何一键生成手机站？  如何选购建站域名与空间？自助平台全解析  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  Swift中swift中的switch 语句  潮流网站制作头像软件下载,适合母子的网名有哪些？  内网网站制作软件,内网的网站如何发布到外网？  建站DNS解析失败？如何正确配置域名服务器？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  如何在云主机快速搭建网站站点？  如何登录建站主机？访问步骤全解析  如何通过建站之星自助学习解决操作问题？  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  建站主机与虚拟主机有何区别？如何选择最优方案？  中山网站推广排名,中山信息港登录入口？  黑客如何利用漏洞与弱口令入侵网站服务器？  北京营销型网站制作公司,可以用python做一个营销推广网站吗？  网站制作模板下载什么软件,ppt模板免费下载网站？  简单实现Android文件上传  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  高性能网站服务器配置指南：安全稳定与高效建站核心方案  php json中文编码为null的解决办法  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  建站之星如何实现五合一智能建站与营销推广？  清除minerd进程的简单方法  制作表格网站有哪些,线上表格怎么弄？  盐城做公司网站,江苏电子版退休证办理流程？  电商网站制作价格怎么算,网上拍卖流程以及规则？  如何在云服务器上快速搭建个人网站？  外贸公司网站制作哪家好,maersk船公司官网？  如何快速生成专业多端适配建站电话？  如何基于云服务器快速搭建个人网站？  制作网站的基本流程,设计网站的软件是什么？