jquery ready函数源代码研究

一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如:
$(document).ready(function (){ alert(‘use in page script tag’) });
$(document).ready(function (){ alert(‘use in import js file’) });
现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:


ready: function(fn) {
        // 绑定监听器
        bindReady();
        // 如果 DOM 加载完成
        if ( jQuery.isReady )
            // 马上运行此函数
            fn.call( document, jQuery );
        // 否则保存起来
        else
            // 把函数加入缓存数组中
            jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
        return this;
}

让我们看看jquery如果实现不同浏览器dom加载完成的通知 bindReady()函数:

var readyBound = false;
function bindReady(){
    if ( readyBound ) return;
    readyBound = true;
// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
    if ( document.addEventListener && !jQuery.browser.opera)
        // 直接使用事件回调即可
        document.addEventListener( “DOMContentLoaded”, jQuery.ready, false );
    // 如果是ie并且不是嵌在frame中
    // 就需要不断地检查文档是否加载完
    if ( jQuery.browser.msie && window == top ) (function(){
        if (jQuery.isReady) return;