document.ready和onload的区别——JavaScript文档加载完成事件

页面加载完成有两种事件
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
 
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
 
 
1.window.onload方法
 
⑴执行时机:
在网页中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript 此时可以访问网页中的所有元素。
window.onload=function(){  $(window).load(function(){
//编写代码 等价于  //编写代码
}  });
 
⑵多次使用:
JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数。

function one(){

alert("one");

}

function two(){

alert("two");

}

window.onload=one;

window.onload=two;

//运行代码后只有 two

2.$(document).ready()方法
 
⑴执行时机:在DOM完全就绪时就可以被调用。(这并不意味着这些元素关联的文件都已经下载完毕)
举个例子:$(document).ready()方法明知要DOM就绪就可以操作了,不需要等待所有图片下载完毕。
 
⑵多次使用:

function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

});

$(document).ready(function(){

two();

});

随机推荐

  1. Inherits、CodeFile、CodeBehind的区别

    Inherits.CodeFile.CodeBehind 在 ASP.NET 中使用代码隐藏方法来设计Web 窗体,可使页代码能够更清晰地从 HTML 内容中分离到完全单独的文件中. 通常一个 @pa ...

  2. (void*)0 的理解

    例如: #define NULL ((void *)0) 用来定义无效的指针 (void *)0 就是将0强制转化为(void *)类型的指针 char *ch = (void *)0;//ch指向地 ...

  3. Debian下安装Firefox与flash简介

    Debian下安装Firefox与flash简介 由于Debian在Firefox的版权上出现了问题,导致官方发布的Debian系统不能使用默认的Firefox浏览器,最后官方重编的Firefox改名 ...

  4. hdu 3666 Making the Grade

    题目大意 给出了一列数,要求通过修改某些值,使得最终这列数变成有序的序列,非增或者非减的,求最小的修改量. 分析 首先我们会发现,最终修改后,或者和前一个数字一样,或者和后一个数字一样,这样才能修改量 ...

  5. UVa 10810 - Ultra-QuickSort

    题目大意:给出一个数列,每次交换相邻数字,求排成递增序的最少交换次数. 分析:求逆序数,合并排序 #include<cstdio>#include<cstring>#inclu ...

  6. iis 管理员执行 aspnet_iis.exe

    如果我们在注册iis的时候,出现上图的问题,我们需要在桌面上新建一个快捷方式 然后在目标处添上我们的命令. 比如:C:\Windows\Microsoft.NET\Framework\v4.0.303 ...

  7. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

  8. java parseint()

    static int parseInt(String s) static int parseInt(String s, int radix) parseInt(String s)表示将 “数字” 转换 ...

  9. 1-1 Windows应用程序的特点

    主要内容:介绍Windows应用程序的特点,并附加了消息和事件的一些区别 //以后该分类中字体均采用 隶书 4(14pt) 1. 面向对象 <1>针对Windows应用本身,如记事本界面, ...

  10. HTTP 状态消息

    1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. 101 Switching Protocols 服务器 ...