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

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

  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 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

  参考资料:

转载于:https://www.cnblogs.com/ningvsban/p/3728558.html

你可能感兴趣的文章
css & input type & search icon
查看>>
C# 强制关闭当前程序进程(完全Kill掉不留痕迹)
查看>>
语音识别中的MFCC的提取原理和MATLAB实现
查看>>
MetaWeblog API Test
查看>>
c# 文件笔记
查看>>
类和结构
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
安装NVIDIA驱动时禁用自带nouveau驱动
查看>>
HDU-1255 覆盖的面积 (扫描线)
查看>>
Java 中 静态方法与非静态方法的区别
查看>>
Jenkins+ProGet+Windows Batch搭建全自动的内部包(NuGet)打包和推送及管理平台
查看>>
线程池的概念
查看>>
Java 序列化
查看>>
Java 时间处理实例
查看>>
Java 多线程编程
查看>>
Java 数组实例
查看>>
mysql启动过程
查看>>
2017前端面试题总结
查看>>
SWIFT国际资金清算系统
查看>>
站立会议第四天
查看>>