JS 页面加载触发事件 document.ready和window.onload的区别
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的区别的更多相关文章
- JS 页面加载触发事件 document.ready和onload的区别(转)
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
- JS 页面加载触发事件 document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- 转 $(document).ready()与window.onload的区别
$(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...
- $(document).ready和window.onload的区别
$(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...
- $(document).ready 与 window.onload的区别?
$(document).ready = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...
随机推荐
- cocos2d之列表容器节点再排序
第一处:获取使用类中传出的数据对象 第二处:清除列表容器中的数据且保存数据缓存 第三处:使用刚创建的函数再排序
- asp.net服务器控件onclick带参数
服务器控件处理参数随笔 正确: <asp:CheckBox ID="cbComplareProduct" runat="server" Text=&quo ...
- my_strstr()
const char* my_strstr(const char* S1,const char* S2){ int i=0,flag=0; while('\0'!=*(S1+i)){ if(*(S1+ ...
- Linux IPC socket编程基础
头文件 #include<unistd.h> #include <sys/types.h> #include <sys/socket.h> #include< ...
- x01.os.10: 输入输出
从 x01.Lab.Download 中下载源代码,进入工程目录,make 后再 bochs,即可见到如下界面: 随便打几个字,ok!按 F2,可切换到第二个终端,界面如下: 当然,按 F3 还可切换 ...
- 远程连接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账 ...
- Linux 下从头再走 GTK+-3.0 (三)
之前我们为窗口添加了一个按钮,接下来让这个按钮丰富一点.并给窗口加上图标. 首先创建 example3,c 的源文件. #include <gtk/gtk.h> static void a ...
- C#学习笔记-icon托盘图标的简单知识
在做整个类似QQ的毕业设计中,有一个小图标把我给难了一阵子,就是托盘小图标
- 【2016-10-14】【坚持学习】【Day5】【策略模式】
今天学了策略模式 例子 一个售票系统,针对不同的用户使用不用的计价方式, 环境类:一个业务场景(电影票累,) 抽象类:计价算法 具体实现类:5折算法,满100减20算法,..... 抽象策略类 abs ...
- VIJOS1240 朴素的网络游戏[DP]
描述 佳佳最近又迷上了某款类似于虚拟人生的网络游戏.在游戏中,佳佳是某旅行团的团长,他需要安排客户住进旅馆.旅馆给了佳佳的旅行团一个房间数的限制.每一个房间有不同的容纳人数和价钱(这个价格是房间的总价 ...