博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【jquery】$(document).ready() 与window.onload的区别
阅读量:5897 次
发布时间:2019-06-19

本文共 1152 字,大约阅读时间需要 3 分钟。

  Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

  1)执行时间 

  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
  $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

  2)编写个数不同 

  window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
  $(document).ready()可以同时编写多个,并且都可以得到执行 
  3)简化写法 
  window.onload没有简化写法 
  $(document).ready(function(){})可以简写成$(function(){});

  以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

  window.onload $(document).ready()  

执行时机

必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完  

编写个数

不能同时编写多个 
以下代码无法正确执行: 
window.onload = function(){ 
   alert(“text1”); 
}; 
window.onload = function(){ 
   alert(“text2”); 
}; 
结果只输出第二个 
能同时编写多个 
以下代码正确执行: 
$(document).ready(function(){ 
   alert(“Hello World”); 
}); 
$(document).ready(function(){ 
   alert(“Hello again”); 
}); 
结果两次都输出  

简化写法

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

 

 

 

 

 

 

 

 

  另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

  参考资料:

转载地址:http://kcxsx.baihongyu.com/

你可能感兴趣的文章
JSP----九大内置对象
查看>>
Java中HashMap详解
查看>>
delphi基本语法
查看>>
沙盒目录介绍
查看>>
260. Single Number III
查看>>
Hadoop生态圈-Kafka的完全分布式部署
查看>>
css的border的solid
查看>>
[MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1
查看>>
jQuery自动完成点击html元素
查看>>
[算法]基于分区最近点算法的二维平面
查看>>
webpack多页应用架构系列(七):开发环境、生产环境傻傻分不清楚?
查看>>
笨办法学C 练习1:启用编译器
查看>>
树的总结--树的性质(树的深度) leetcode
查看>>
nagios短信报警(飞信fetion20080522004-linrh4)
查看>>
【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!...
查看>>
linux 将大文件分成小文件
查看>>
CCNA- 距离矢量路由协议学习
查看>>
企业实践用户邮箱导入/导出(第2部分)
查看>>
我的友情链接
查看>>
如何学习Linux命令-初级篇
查看>>