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. cocos2d之列表容器节点再排序

    第一处:获取使用类中传出的数据对象 第二处:清除列表容器中的数据且保存数据缓存 第三处:使用刚创建的函数再排序

  2. asp.net服务器控件onclick带参数

    服务器控件处理参数随笔 正确: <asp:CheckBox ID="cbComplareProduct" runat="server" Text=&quo ...

  3. my_strstr()

    const char* my_strstr(const char* S1,const char* S2){ int i=0,flag=0; while('\0'!=*(S1+i)){ if(*(S1+ ...

  4. Linux IPC socket编程基础

    头文件 #include<unistd.h> #include <sys/types.h> #include <sys/socket.h> #include< ...

  5. x01.os.10: 输入输出

    从 x01.Lab.Download 中下载源代码,进入工程目录,make 后再 bochs,即可见到如下界面: 随便打几个字,ok!按 F2,可切换到第二个终端,界面如下: 当然,按 F3 还可切换 ...

  6. 远程连接mysql报错【1130 -host 'localhost' is not allowed to connect to this mysql server】

    远程连接mysql时包如下错误: 1130 -host 'localhost' is not allowed to connect to this mysql server 解决办法 本地用root账 ...

  7. Linux 下从头再走 GTK+-3.0 (三)

    之前我们为窗口添加了一个按钮,接下来让这个按钮丰富一点.并给窗口加上图标. 首先创建 example3,c 的源文件. #include <gtk/gtk.h> static void a ...

  8. C#学习笔记-icon托盘图标的简单知识

    在做整个类似QQ的毕业设计中,有一个小图标把我给难了一阵子,就是托盘小图标

  9. 【2016-10-14】【坚持学习】【Day5】【策略模式】

    今天学了策略模式 例子 一个售票系统,针对不同的用户使用不用的计价方式, 环境类:一个业务场景(电影票累,) 抽象类:计价算法 具体实现类:5折算法,满100减20算法,..... 抽象策略类 abs ...

  10. VIJOS1240 朴素的网络游戏[DP]

    描述 佳佳最近又迷上了某款类似于虚拟人生的网络游戏.在游戏中,佳佳是某旅行团的团长,他需要安排客户住进旅馆.旅馆给了佳佳的旅行团一个房间数的限制.每一个房间有不同的容纳人数和价钱(这个价格是房间的总价 ...