ready分裂与实施种种,onload的界别浅析

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

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

A.关于$(document).ready():

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

那么我们在编写JS脚本时什么情况下使用$(document).ready()又在什么情况下使用$(window).load呢,我们先来了解一下两者的功能

1.执行时间
       
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
       
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
        
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
         $(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
         window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});

jquery中的$(document).ready(),那$(document).ready()到底是什么作用呢?是不是可以用window.onload
= function(){ … }来实现呢?

一、$(document).ready()

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

这里,我们要明确二者之间的区别。

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

复制代码 代码如下:

  我们使用window.onload = function(){ …
},是希望在页面被载入时执行function中的处理,但是这些JS代码只有在页面上的全部内容加载完成(包括头部的banner广告,所有图片)的时候才会执行。将window.onload放在最上边的原因就是当你第一次运行codes的时候,HTML’document’还没有加载完成。

原生JavaScript中的写法如下:

$(document).ready(function(){

});

  而$(document).ready()却不需要载入得这么“完全”。$(document).ready()是在DOM结构载入完后执行的,而
window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完。因此,ready肯定在onload
之前发生,页面加载大或者多的图片而使onload执行延后,使用jquery的ready可缓解此问题。

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

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

  我们应该紧记,jquery的ready是指在页面的DOM模型加载完后执行指定的函数。之所以经常用$(document).ready()来取代
window.onload,就是因为它是在dom模型加载完成后就执行,而window.onload是在dom元素加载完全后才执行。

jQuery中的写法如下:

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就

B.关于document.onload和window.onload:

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

需要用到:

document.onload和window.onload没有本质的区别,都是指页面载入完成后执行指定函数。

复制代码 代码如下:

做一个比较吧:

网站地图xml地图