document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件:

一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

1、Dom Ready

使用jq时一般都是这么开始写脚本的:

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

例如:

$(function() {
$("a").click(function() {
alert("Hello world!");
});
})

这个例子就是给所有的a标签绑定了一个click事件。即当所有链接被鼠标单击的时候,都执行 alert("Hello World!");
也就是说页面加载时绑定,真正该触发时触发。
其实这个就是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了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情,比如:

window.onload=function(){
//do something
}
//或者经常用到的图片
document.getElementById("imgID").onload=function(){
//do something
}

这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以对DOM进行操作,document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

最后附上一段在所有DOM元素加载之前执行的jQuery代码。

<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script>

JS 页面加载触发事件 document.ready和window.onload的区别的更多相关文章

  1. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  2. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  3. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  4. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  5. jQuery中$(document).ready()和window.onload的区别?

    document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...

  6. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

  7. 转 $(document).ready()与window.onload的区别

    $(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...

  8. $(document).ready和window.onload的区别

    $(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...

  9. $(document).ready 与 window.onload的区别?

    $(document).ready  = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...

随机推荐

  1. openstack-kilo--issue(十一)Failed connect to 169.254.169.254:80; No route to host

    # curl http://169.254.169.254/latest/user-data curl: () Failed connect to ; No route to host 解决方案: c ...

  2. oracle常用命令集合

    一. 表空间相关命令 创建数据表空间 create SMALLFILE tablespace dataSpace datafile 'E:\oracle\product\10.2.0\oradata\ ...

  3. js 读取 cookie

    (新摘未验证)// 将document.cookie的值以名/值对组成的一个对象返回 // 假设储存cookie的值的时候是采用encodeURIComponent()函数编码的 function g ...

  4. 错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”的解决方法(转)

    (转自:http://blog.csdn.net/bombzhang/article/details/12676789) 有一次升级开发工具后发现xml脚本出现错误“Unexpected namesp ...

  5. python setuptools工具打包

    http://blog.csdn.net/five3/article/details/7847551http://blog.csdn.net/reyoung1110/article/details/7 ...

  6. linux centos6.5 ftp网页vsftpd配置

    安装命令centos下 yum install vsftpd 出现“Complete!”时意味着安装完成.Linux中,系统对于大小写严格区分,比如abc和ABC是完全不相同的字符,要特别注意.配置V ...

  7. jmeter 性能测试 JDBC Request (查询数据库获取数据库数据) 的使用

    JDBC Request 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数据库数据进行操作.它经常需要和JDBC Connection Configuration配置原 ...

  8. union all 与order by的连用

    昨天工作过程中发现一个奇怪的地方: 代码段A: 1---select   *  from  table1 2---order  by  no 3---union  all 4---select   * ...

  9. var 0bj = []声明报错的小问题

    闲来无事,找了份javascript的习题来作作,结果第一题的答案就难住了,附原题: Javascript中, 以下哪条语句一定会产生运行错误?      答案(  B   ) A.var _变量=N ...

  10. 这回真的是挤时间了-PHP基础(三)

    hi 刚看了唐人街探案,5星好评啊亲.由于是早就约好的,也不好推辞(虽然是和男的..),但该写的还是得挤时间写.明天早上老师的项目结题,虽然和我关系不大,但不要添乱就好!! 1.PHP  一.PHP基 ...