[转]jQuery DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后。而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了。

所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理那些老旧的浏览器,于是DOM Ready事件就成了各个JS框架的必备功能啦。

先来看看jQuery DOM Ready事件的用法吧,jQuery的DOM Ready事件用法很简单,大家都用过,下面的三种语法都是可用的:

  • $( document ).ready( handler )
  • $().ready( handler )(不推荐)
  • $( handler )

还有一种方式:$(document).on(‘ready‘, handler);,已经在1.8版本里被废弃了,但是你还可以这么用。这种方式和ready方法的作用一样,但是如果ready事件已经被触发过了,这种方式绑定的handler将不会被执行,而且用这种方式绑定的handler会在以上三种方法绑定的handler被执行后再执行。

一、DOM Ready检测

下面,我们按照jQuery的思路,一步步的看一下jQuery如何处理DOM Ready事件的。

1. 标准浏览器

对于标准浏览器,我们可以添加DOMContentLoaded事件监听器:

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
2. 非标准浏览器

而对于非标准浏览器,我们可以监听document.onreadystatechange事件,如果document.readyState == ‘complete’时,可以认为DOM结构已经加载完成。

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

    // If IE event model is used
} else {
    document.attachEvent( "onreadystatechange", DOMContentLoaded );
}

这里不用担心jQuery.ready()会被多次触发,因为在jQuery.ready()中有检测是否被触发过了。

4. 还是IE

在IE中,onreadystatechange事件对于iframe的来说可能会有延迟,但是却足够安全。但这个事件对于非iframe有时会不太可靠,特别是在页面中图片资源比较多的时候,可能反而在onload事件触发之后才能触发,因此对于这种情况,需要做进一步的检测:

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

    // A fallback to window.onload, that will always work
    window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
} else {
    document.attachEvent( "onreadystatechange", DOMContentLoaded );

    // A fallback to window.onload, that will always work
    window.attachEvent( "onload", jQuery.ready );

    // If IE and not a frame
    // continually check to see if the document is ready
    var top = false;

    try {
        top = window.frameElement == null && document.documentElement;
    } catch(e) {}

    // 如果是非iframe的情况,并且支持doScroll方法
    if ( top && top.doScroll ) {
        // 在这个自执行函数中,调用top.doScroll方法,若报错,则延时50ms再检测;若不报错,则表示DOM Ready,可以执行jQuery.ready()方法了
        (function doScrollCheck() {
            if ( !jQuery.isReady ) {
                try {
                    top.doScroll("left");
                } catch(e) {
                    return setTimeout( doScrollCheck, 50 );
                }
                // and execute any waiting functions
                jQuery.ready();
            }
        })();
    }
}

是的,JS就是这么一门神(dan)奇(teng)的语言,每个浏览器的实现可能不尽相同,所以就出现了这种对一个事件的监听要做如此多的兼容考虑的情况。

5. Ready太晚了

还有一种情况是,当我们调用$(document).ready()的时候,DOM结构已经加载完成了,这时候可以直接调用jQuery.ready,但是因为IE的问题,需要延迟调用,所以有下面的代码,至于为什么要这么用,小Y也没看明白:

if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    setTimeout( jQuery.ready, 1 );
} else if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

    // A fallback to window.onload, that will always work
    window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
} else {
    document.attachEvent( "onreadystatechange", DOMContentLoaded );

    // A fallback to window.onload, that will always work
    window.attachEvent( "onload", jQuery.ready );

    // If IE and not a frame
    // continually check to see if the document is ready
    var top = false;

    try {
        top = window.frameElement == null && document.documentElement;
    } catch(e) {}

    // 如果是非iframe的情况,并且支持doScroll方法
    if ( top && top.doScroll ) {
        // 在这个自执行函数中,调用top.doScroll方法,若报错,则延时50ms再检测;若不报错,则表示DOM Ready,可以执行jQuery.ready()方法了
        (function doScrollCheck() {
            if ( !jQuery.isReady ) {
                try {
                    top.doScroll("left");
                } catch(e) {
                    return setTimeout( doScrollCheck, 50 );
                }
                // and execute any waiting functions
                jQuery.ready();
            }
        })();
    }
}

到这里,jQuery对DOM Ready的检测就完成了,那么$(document).ready()是怎么工作的呢?

二、DOM Ready全过程

这里,我们按代码执行的顺序,来理解jQuery的DOM Ready的全部代码,看jQuery是如何一步步处理DOM Ready事件的。为了阅读的方便,小Y将代码做了删减,并对代码顺序做了调整,大家可以按从1到7的顺序看代码。这里不对Deferred对象做解释,因为小Y也还没有看,只是记住他的作用是维护一系列条件触发的回调函数。

jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
        if ( jQuery.isFunction( selector ) ) {
            // 当调用$(callback); 时,会调用$(document).ready(callback);      Ⅰ
            return rootjQuery.ready( selector );
        }
    },

    ready: function( fn ) {
        // Add the callback
        // 调用jQuery.ready.promise方法,返回一个Deferred对象 readyList,
        // 然后将fn加入到readyList的成功的回调列表中。
        // 如果readyList已存在,则直接返回readyList,然后直接调用这个回调函数fn
        jQuery.ready.promise()                               Ⅱ
            .done( fn );                              Ⅳ

        return this;
    }
};

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // IE的bug
        if ( document.readyState === "complete" ) {
            setTimeout( jQuery.ready, 1 );

            // 给标准浏览器绑定DOMContentLoaded事件以触发DOMContentLoaded方法
            // 同时,绑定window.onload事件作为备用方案
        } else if ( document.addEventListener ) {
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            window.addEventListener( "load", jQuery.ready, false );

        // 给IE浏览器绑定onreadystatechange事件,在DOMContentLoaded中判断
        // readyState是否为complete
        } else {
            document.attachEvent( "onreadystatechange", DOMContentLoaded );
            window.attachEvent( "onload", jQuery.ready );

            // 对IE做进一步的兼容性检测
            var top = false;
            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}
            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {
                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }
                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    // 返回readyList
    return readyList.promise( obj );                 Ⅲ
};

// 接下来就是等待DOMContentLoaded/readyState===‘complete‘事件的发生了
// 移除DOMReady事件监听,执行jQuery.ready()
    DOMContentLoaded = function() {                  Ⅴ
        // 标准浏览器
        if ( document.addEventListener ) {
            document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            jQuery.ready();
        // IE 浏览器
        } else if ( document.readyState === "complete" ) {
            document.detachEvent( "onreadystatechange", DOMContentLoaded );
            jQuery.ready();
        }
    };

jQuery.extend({
    // DOM Ready标志位,DOM Ready触发后置为true
    isReady: false,

    // DOM Ready后运行
    ready: function( ) {

        // 如果已经Ready,则直接返回
        if ( jQuery.isReady ) {
            return;
        }

        // 兼容IE
        if ( !document.body ) {
            return setTimeout( jQuery.ready, 1 );
        }

        // 将isReady置为true
        jQuery.isReady = true;              Ⅵ

        // 这里是真正触发我们传入的回调的地方!!!!
        // 传入上下文和回调函数的参数列表
        // 注意啦,上下文是document,也就是说我们在`$(document).ready(fn);`里的fn中的this是`document`,不是`window`
        // 参数列表传入了jQuery,意味着即使我们调用了`$.noConflict()`将$让渡出去了,我们仍然能在fn中定义第一个参数为$,代表jQuery
        readyList.resolveWith( document, [ jQuery ] );              Ⅶ

        // 这段代码是为了触发这种方式添加的DOM Ready回调: $(document).on(‘ready‘ , fn);
        // 这种方式在1.8被废弃,但是没有被移除
        // 你可以看到这种方式添加的DOM Ready回调是最后被执行的
        if ( jQuery.fn.trigger ) {
            jQuery( document ).trigger("ready").off("ready");
        }
    }
});

看完代码,让我们再来看一下jQuery的思路:

  • Ⅰ. 调用rootjQuery的ready事件
  • Ⅱ. 调用jQuery.ready.promose(),若readyList为空,将readyList赋值为一个Deferred对象;否则将回调函数添加到readyList成功回调列表中,然后跳转到第7步
  • Ⅲ. 在jQuery.promise()中为DOM Ready事件添加监听器
  • Ⅳ. 将回调函数fn添加到readyList的成功回调列表中
  • Ⅴ. 当DOM Ready事件发生时,移除监听器,执行jQuery.ready()
  • Ⅵ. 在jQuery.ready()中将isReady置为true
  • Ⅶ. 执行readyList的成功回调列表中的方法

在jQuery.ready.promise()中,还涉及到了jQuery.Deferred和jQuery.Callback接口,这里暂不讨论,因为小Y也还没看,且听下回分析吧。

原文链接:http://www.html-js.com/article/Read-jQuery-jQuery-DOM-Ready

时间: 2024-10-29 19:09:59

[转]jQuery DOM Ready的相关文章

jquery dom ready, jqery2.1.1实现-源码分析

本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我现在闲来无事就闲扯一下jquery document  ready的实现.在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准 平时一般都会这样写,一般就这两种方式 $(document).ready(function(){ //do something }) $(function(){

【jQuery源码】DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

jQuery - DOM 元素方法

jQuery DOM 元素方法 - get() 方法 实例 获得第一个 p 元素的名称和值: <script type="text/javascript">   $(document).ready(function(){   $("button").click(function(){   x=$("p").get(0);   $("div").text(x.nodeName + ": " + x

jQuery的ready与js的load事件的区别

摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下.1. 执

[Javascript]jquery $(document).ready() 与window.onload的区别

引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同      

DOM Ready 简述

当页面加载完成后去做一些事情:一般情况下一个页面的响应加载顺序是:域名解析-加载html-加载js和css-加载图片等其他信息. 1.window.onload事件   效果:在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发 原理:一是ready,表示文档结构已经加载完成(不包含图片非文字媒体文件). 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 代码: 1 window.onload = funct

【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

jQuery中处理加载时机的几种方式 第一种: jQuery(document).ready(function() { alert("你好"); }); //或 $(document).ready(function() { alert("你好"); }); 第二种: jQuery(function() { alert("你好"); }); //或 $(function() { alert("你好"); }); 第三种: (fu

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

JQuery的ready函数与JS的onload的区别

JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r