window.load和$(document).ready()事件
1.加载多个函数的问题
在onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.ready()方法,它们会按次序依次执行
2.代码和内容不分离
3.执行先后顺序不同
对于body.onload事件,是在加载完所有页面内容才会触发,所有内容包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.
而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有onload事件的弊端.
翻翻jQuery的源码看看$(document).ready()是如何实现的吧:
代码如下:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch( error ) { setTimeout( arguments.callee, 0 ); return; }
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready );
事件DOMContentLoaded与Load的区别
先看这两句代码:
window.addEventListener(‘load’, loaded, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);
总结:
load事件是在页面所有元素都加载完后触发;
DOMContentLoaded,它是指dom tree加载完就触发。这个事件要小心使用,当然它是个强大的事件,起码用上它在某一层面上防止了页面加载被堵塞
DOMContentLoaded
developer.mozilla.org上的文章说:
当页面中的文档树解析完成时,在页面的Document对象上,会触发DOMContentLoaded事件.该事件代表了,页面的DOM树已经构建完成,但页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成,在页面完全加载完成时,会触发另外一个类似的称为"load"的事件.
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">接口 :</dfn>Event
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否为同步模式:</dfn>是
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否冒泡 :</dfn> 是
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">触发源:</dfn> Document
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">能否阻止默认动作 :</dfn> 否
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否存在默认动作 :</dfn>否
注意: 样式表文件的加载会阻塞脚本执行, 所以,如果你有一个<script>标签放在一个<link rel="stylesheet" ...>标签之后, 则直到该样式表文件加毕完之前,DOMContentLoaded事件都不会触发.
转载于:https://my.oschina.net/xiaomu1994/blog/744919
window.load和$(document).ready()事件相关推荐
- JQ中$(window).load和$(document).ready()使用,区别与执行顺序
本文内容借鉴http://www.jb51.net/article/107111.htm(阅读原文请跳转此链接!) 一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载html -> ...
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
- window.onload和$(document).ready()区别很大……
window.onload和$(document).ready()区别很大-- posted on 2014-06-11 14:01 Juniors 阅读(...) 评论(...) 编辑 收藏 转载于 ...
- window.onload与$(document).ready()的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过Javascript为DOM元素添加事件.在常规的Javascript代码中,通常使用window.onload方法,而在Jquery中,使用 ...
- window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...
- 请指出document load和document ready的区别?
共同点:这两种事件都代表的是页面文档加载时触发. 异同点: ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件). onload 事件的触发,表示页面包含图片等文件在内的所有 ...
- $(document).ready() 和 window.onload 的区别
参考资料: http://blog.csdn.net/lcc921528642/article/details/48379431 http://www.cnblogs.com/jiajia123/p/ ...
- $(document).ready()和window.onload之间的差异
最近使用$(document).ready(function(){})遇到一个问题:加载页面后发送数据请求后台,得到的数据不对,后发现请求后台时,发送的数据为空,没有获取到值导致的.------改成w ...
- 关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
- jQuery函数$(window).load事件
绑定jQuery函数到$(window).load事件 大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready ...
最新文章
- Eigen向量化内存对齐/Eigen的SSE兼容,内存分配/EIGEN_MAKE_ALIGNED_OPERATOR_NEW
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
- 细细品味C#——Socket编程专题
- urllib post请求 cookie
- perl模块net mysql_Perl模块实例化DBI Forks“Mysql服务器已经消失”
- python zip dict_关于python:zip(list)和zip(* list)之间的区别
- java url类下载_Java根据url下载图片或文件的工具类-Fun言
- python数据分析之(4)读写数据文件CSV,EXCEL等
- mysql count group by_MySQL中使用count与group by 的统计问题
- Jquery+WeUI开发移动APP应用
- 12. 信息系统项目的采购管理
- 逻辑覆盖:语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、组合覆盖和路径覆盖
- 摄影培训社培训资料(上
- Java——1. 安装
- 概率论与数理统计(3)--指数分布函数及其期望、方差
- 表单格式化插件jquery.serializeJSON
- bzoj2818Gcd
- 无聊却很有意思的事情
- uni-app知识点整理
- 711问题-优化蛮力求解