华山资源网

JQ中$(window).load和$(document).ready区别与执行顺序
网络编程 2024/11/15 佚名
3 1

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之后执行，且页面中所有内容全部加载完成后才会执行，两者的使用时机一目了然，大家可以自行决定。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com