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. magento性能优化

    magento性能优化 14个快速加载web页面的技巧: 减少HTTP请求数使用CDN增加过期头信息gzip压缩传输内容将css样式表放在页首将js文件放在页尾不使用css表达式尽量少用内联式的css ...

  2. LeetCode Generate Parentheses 构造括号串(DFS简单题)

    题意: 产生n对合法括号的所有组合,用vector<string>返回. 思路: 递归和迭代都可以产生.复杂度都可以为O(2n*合法的括号组合数),即每次产生出的括号序列都保证是合法的. ...

  3. Spark延长SparkContext初始化时间

    有些应用中可能希望先在driver上运行一段java单机程序,然后再初始化SparkContext用集群模式操作java程序返回值.从而避免过早建立SparkContext对象分配集群资源,使资源长时 ...

  4. <转>windows下安装redis

    1.redis简介redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...

  5. iOS学习笔记---oc语言第九天

    初级内存管理 iOS应用程序出现crash(闪退),90%以上是内存问题////其他:数组越界,方法只声明没实现 内存问题体现在两个方面:内存溢出\野指针异常 内存溢出:程序运行超出内存上限 野指针异 ...

  6. iOS学习笔记---c语言第十一天

    函数指针 一.函数指针定义 //函数声明:声明我是一个什么函数 //求两个数的和 //函数的类型:int (int x,int y) //即:我是一个返回值为整型,有两个整型参数的函数. //函数名是 ...

  7. Protobuf C/C++实战笔记(1)

    前言: Protobuf作为数据交换格式, 被很多人喜欢. 数据压缩比高, 向后兼容性强, 性能优异, 而且对平台中性, 支持多语言(C/C++, JAVA, Python). 优点太多, 实在不胜枚 ...

  8. SAP系统联机应用程序帮助

    新安装好的SAP系统,联机帮助是不能用的. 通过菜单中的“帮助-应用程序帮助” 和“帮助-SAP库”都打不开任何帮助页面.这并不是因为SAPgui安装不完整,而是因为SAP的帮助系统本身就不包含在GU ...

  9. c 深度剖析 2

    1 while 等循环语句 1 break 和 continue的去别 2 将短的循环写在外面,长的写在里面: 3 循环嵌套尽量短 2 void void *p,为空指针类型,可以指向任何的类型 若函 ...

  10. thinkphp 验证码的使用

    在thinkphp中使用验证码很容易,只要调用thinkphp现有的方法就可以.当然,php的GD库肯定是要开的(就是在php.ini中要加载gd模块). thinkphp 3.2 --------- ...