jquery中ready()函数执行的时机和window的load事件比较
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jquery中ready()函数执行的时机和window的load事件比较的相关资料,需要的朋友可以参考下
jquery的ready()实现的是 DOMContentLoaded 事件，DOMContentLoaded与window load事件的区别
简单的说ready()是在文档加载完成就会触发,此时图片等资源可能还没有完全加载, load是在所有资源都加载完成后才会触发
看下ready函数的代码就什么都清楚了。下面的代码加上了注释：
// Handle when the DOM is ready
ready: function() {
// Make sure that the DOM is not already loaded
if ( !jQuery.isReady ) {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( !document.body ) {
return setTimeout( jQuery.ready, 13 );
// Remember that the DOM is ready
jQuery.isReady =
// If there are functions bound, to execute
if ( readyList ) {
// Execute all of them
var fn, i = 0;
while ( (fn = readyList[ i++ ]) ) {
fn.call( document, jQuery );
// Reset the list of functions
readyList =
// Trigger any bound ready events
if ( jQuery.fn.triggerHandler ) {
jQuery( document ).triggerHandler( "ready" );
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具& & & 用过JavaScript的童鞋，应该知道window对象和document对象，也应该听说过load事件和ready事件，小菜当然也知道，而且自认为很了解，直到最近出了问题，才知道事情并不是那么简单。
& & &&首先说说window和document，直观上来讲，window代表的是浏览器窗口，而document代表的是浏览器窗口中加载的dom元素，进一步说，document是window的一个属性，window是最顶级的对象。
& & &&二者有啥区别呢？很好理解，假设现在有一个浏览器，里边加载的页面特别长，已经超出了一屏，当然，肯定会出现滚动条了，这时候，$(window).height()和$(document).height()是不相等的，document的高度肯定要比window的大，因为window窗口始终就是那么大。见下图：
& & &&再说说load事件和ready事件(这里的load和ready是指jQuery的事件，下同)。
& & &&先说load，load事件主要就是用来代替原生的window.onload，它只能用在两个场景下：
& & &&& & &&&& window对象上。比如$(window).load(fn);。
& & &&& & &&&& 带有URL的元素(images, scripts, frames, iframes)。比如$(&img&).load(fn);。
& & &&除此之外，任何元素都没有load事件，比如：$(document).load(fn);这是错误的写法，根本不会执行。
& & &&load事件需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。
& & &&最重要的还没说，jQuery官方文档明确说明load事件的跨浏览器兼容性很差(It doesn't work consistently nor reliably cross-browser)。经过小菜测试，谷歌浏览器仅仅支持$(window).load(fn);，而火狐浏览器支持$(window).load(fn);和$(&img&).load(fn);。
& & &&所以，除非必要情况下，否则强烈不推荐使用load事件。
& & &&最后说说ready，ready事件可以加在任意元素上，比如$(window).ready(fn);、$(document).ready(fn);、$(&div&).ready(fn);等等。
& & &&ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。
& & &&ready事件可以同时注册多个，执行时，按照注册的先后顺序执行。注意，就算是注册不同元素的ready事件，也是按照先后顺序执行。例如下列代码：
1 $(window).ready(function(){
alert("window");
4 $(document).ready(function(){
alert("document");
7 $("div").ready(function(){
alert("div");
& & &&按照常理，应该是div先加载完，所以先执行alert("div");，然后才是alert("document");或alert("window");，但遗憾的是，alert("div");是最后一个执行的。所以，无论是否在同一元素上注册ready事件，都是按照注册的先后顺序执行。
& & &&最后一项，ready事件与window.onload(或&body onload=&&&)是冲突的，如果使用了window.onload(或&body onload=&&&)，将导致ready事件不执行。
& & &&经过如此多的讨论，最终证明：$(document).ready(fn);兼容性、安全性是最好的，如果有此类需求，尽量采用这种方式。
阅读(...) 评论()jQuery中document与window以及load与ready 区别详解-学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
> 信息中心 >
jQuery中document与window以及load与ready 区别详解
来源：互联网 发表时间： 15:46:03 责任编辑：王亮字体：
为了帮助网友解决“jQuery中document与window以及load与ready 区别详解”相关的问题，学网通过互联网对“jQuery中document与window以及load与ready 区别详解”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:jQuery中document与window以及load与ready 区别详解，具体解决方案如下：解决方案1：用过JavaScript的童鞋，应该知道window对象和document对象，也应该听说过load事件和ready事件，小菜当然也知道，而且自认为很了解，直到最近出了问题，才知道事情并不是那么简单。 首先说说window和document，直观上来讲，window代表的是浏览器窗口，而document代表的是浏览器窗口中加载的dom元素，进一步说，document是window的一个属性，window是最顶级的对象。 二者有啥区别呢？很好理解，假设现在有一个浏览器，里边加载的页面特别长，已经超出了一屏，当然，肯定会出现滚动条了，这时候，$(window).height()和$(document).height()是不相等的，document的高度肯定要比window的大，因为window窗口始终就是那么大。见下图：
再说说load事件和ready事件(这里的load和ready是指jQuery的事件，下同)。 先说load，load事件主要就是用来代替原生的window.onload，它只能用在两个场景下： ? window对象上。比如$(window).load(fn);。 ? 带有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。 除此之外，任何元素都没有load事件，比如：$(document).load(fn);这是错误的写法，根本不会执行。 load事件需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。 最重要的还没说，jQuery官方文档明确说明load事件的跨浏览器兼容性很差(It doesn't work consistently nor reliably cross-browser)。经过小菜测试，谷歌浏览器仅仅支持$(window).load(fn);，而火狐浏览器支持$(window).load(fn);和$(“img”).load(fn);。 所以，除非必要情况下，否则强烈不推荐使用load事件。 最后说说ready，ready事件可以加在任意元素上，比如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。 ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。 ready事件可以同时注册多个，执行时，按照注册的先后顺序执行。注意，就算是注册不同元素的ready事件，也是按照先后顺序执行。例如下列代码： 复制代码 代码如下: $(window).ready(function(){ & alert("window"); }); $(document).ready(function(){ & alert("document"); }); $("div").ready(function(){ & alert("div"); });
按照常理，应该是div先加载完，所以先执行alert("div");，然后才是alert("document");或alert("window");，但遗憾的是，alert("div");是最后一个执行的。所以，无论是否在同一元素上注册ready事件，都是按照注册的先后顺序执行。 最后一项，ready事件与window.onload(或&body onload=””&)是冲突的，如果使用了window.onload(或&body onload=””&)，将导致ready事件不执行。 经过如此多的讨论，最终证明：$(document).ready(fn);兼容性、安全性是最好的，如果有此类需求，尽量采用这种方式。
2个回答1个回答4个回答4个回答3个回答3个回答1个回答2个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答
相关文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 学网 版权所有
京ICP备号-1 京公网安备02号jQuery中ready与load事件
jQuery中ready与load事件jQuery有3种针对文档加载的方法$(document) ready(function() {
document ready 简写$(function() {
})$(document) load(function()
jQuery中ready与load事件
jQuery有3种针对文档加载的方法
$(document).ready(function() {
// ...代码...
//document ready 简写
$(function() {
// ...代码...
$(document).load(function() {
// ...代码...
一个是ready一个是load，这两个到底有什么区别呢？
ready与load谁先执行：
大家在面试的过程中，经常会被问到一个问题：ready与load那一个先执行，那一个后执行？答案是ready先执行，load后执行。
DOM文档加载的步骤：
要想理解为什么ready先执行，load后执行就要先了解下DOM文档加载的步骤：
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load
从上面的描述中大家应该已经理解了吧，ready在第（4）步完成之后就执行了，但是load要在第（6）步完成之后才执行。
ready与load的区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说应该越快加载越好。在一个高速浏览的时代，没人愿意等待答案。假如一个网站页面加载超过4秒，不好意思，你1/4的用户将面临着流失，所以对于框架来说用户体验是至关重要的，我们应该越早处理DOM越好，我们不需要等到图片资源都加载后才去处理框架的加载，图片资源过多load事件就会迟迟不会触发。
我们看看jQuery是如何处理文档加载时机的问题：
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
if ( document.readyState === &complete& ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
document.addEventListener( &DOMContentLoaded&, completed, false );
window.addEventListener( &load&, completed, false );
return readyList.promise( obj );
jQuery的ready是通过promise给包装过的，这也是jQuery擅长的手法，统一了回调体系。
可见jQuery兼容的具体策略：针对高级的浏览器，我们当前很乐意用DOMContentLoaded事件了，省时省力。
那么旧的IE如何处理呢？
继续看jQuery的方案：
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( &onreadystatechange&, completed );
// A fallback to window.onload, that will always work
window.attachEvent( &onload&, completed );
// If IE and not a frame
// continually check to see if the document is ready
top = window.frameElement == null && document.documentE
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
// Use the trick by Diego Perini
// http://./IEContentLoaded/
top.doScroll(&left&);
} catch(e) {
return setTimeout( doScrollCheck, 50 );
// detach all dom ready events
// and execute any waiting functions
jQuery.ready();
& & 如果浏览器存在&document.onreadystatechange&事件，当该事件触发时，如果&document.readyState=complete&的时候，可视为 DOM 树已经载入。不过，这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload 事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
针对IE的加载检测
Diego Perini 在 2007 年的时候，报告了一种检测 IE 是否加载完成的方式，使用 doScroll 方法调用，详情可见http://./IEContentLoaded/。
原理就是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常。
结论：所以总的来说当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了。
这都是我们在第一时间内处理ready加载的问题，如果ready在页面加载完毕后呢？
就必须针对这样的情况跳过绑定了：
if ( document.readyState === &complete& ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( .ready );
直接通过查看readyState的状态来确定页面的加载是否完成了。这里会给一个定时器的最小时间后去执行，主要保证执行的正确。
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网&
[ 你可能感兴趣的文章 ]
[前端插件推荐] Plugin
响应式无限轮播jQuery旋转木马插件
爱思资源网 Copyright
All rights reserved.(晋ICP备号-1)