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树加载完成 ...
随机推荐
- STM32重映射(PinRemap)的使用,注意!
STM32重映射,内容和细节稍后补充,这里只说几个注意点,花了我一晚上的时间调试终于找到问题所在了... 芯片: STM32f107vct6 晶振: 25M 通过分频器与锁相环,使系统时钟为72M 背 ...
- VMworld 2015 感受:VMware “Ready For Any”
今年有机会参加在旧金山举行的 VMworld 2015.今天是正式开始的第一天.争取每天写一篇文章分享所见所听所感.第一天的主要活动,包括上午的 General Session,由 VMware 的几 ...
- USACO1.5Superprime Rid[附带关于素数算法时间测试]
题目描述 农民约翰的母牛总是产生最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们.农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数字都组 ...
- AC日记——计算2的N次方 openjudge 1.6 12
12:计算2的N次方 总时间限制: 1000ms 内存限制: 65536kB 描述 任意给定一个正整数N(N<=100),计算2的n次方的值. 输入 输入一个正整数N. 输出 输出2的N次方 ...
- AC日记——有趣的跳跃 openjudge 1.6 07
07:有趣的跳跃 总时间限制: 1000ms 内存限制: 65536kB 描述 一个长度为n(n>0)的序列中存在“有趣的跳跃”当前仅当相邻元素的差的绝对值经过排序后正好是从1到(n-1). ...
- single单例模式
单例模式:多用于数据库连接,保证数据库只连接一次,避免重复连接.因为多次打开服务器会造成服务器负担,运行速度会减慢. 以下是一个连接数据库的单例模式: <?php class db_mysql{ ...
- [No000032]程序员的年龄天花板
程序员职业生涯中流行这这样一个定律:35岁定律,那35岁以上的老程序员都干吗去了呢?为了讨论程序员的职业寿命,我们先得给公司或者团队分分类.大概有这么三类: 外包型 项目型 产品型 咱们一一来说一下吧 ...
- 比较全的JavaScript倒计时脚本[xyytit]
需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用: 1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41 ...
- AFN 处理网络哪些事(轻松掌握AFN网络顶级框架)
AFN 一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装 虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 AFN的githu ...
- SS命令和Netstat命令比较
在早期运维工作中,查看服务器连接数一般都会用netstat命令.其实,有一个命令比netstat更高效,那就是ss(Socket Statistics)命令!ss命令可以用来获取socket统计信息, ...