`
backspace
  • 浏览: 133430 次
文章分类
社区版块
存档分类
最新评论

jQuery DOMready 页面加载事件 研究

 
阅读更多

jQuery中的ready事件原型,在这里提取出来便于理解,代码+注释 如下:

    // 事件队列
    var EventQueue = null;
    // 是否已经执行过了,只执行一次
    var isFire = false;
    //添加ready事件
    function addReadyEvent(fn){
        if(!EventQueue) EventQueue = [];
        if(document.readyState == 'complete'){
            fn();
        }else{
            EventQueue.push(fn);
        }
    }
    // 触发ready事件
    function fireReadyEvent(){
        if(!isFire){
            var fn,i=0;
            if(EventQueue){
                while(fn = EventQueue[i]){
                    fn();
                    i++;
                }
                EventQueue = null;
            }
            isFire = true;
        }
    }
    // 绑定ready事件
    function bindReady(){
        if(document.addEventListener){
            // 标准浏览器DOM加载完毕后执行队列,并卸载事件
            document.addEventListener('DOMContentLoaded',unbindReady,false);
            // 确保会执行
            window.addEventListener('load',fireReadyEvent,false);
        }else if(document.attachEvent){
            // IE浏览器加载事件变化的时候执行unbindReady
            document.attachEvent('onreadystatechange',unbindReady);
            // 确保会执行
            window.attachEvent('onload',fireReadyEvent);
        }

        var toplevel = false; // 是否顶层对象

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            // IE通过判断doScroll,在onreadystatechange = 'complete' 之前执行
            doScrollCheck();
        }
    }

    function doScrollCheck() {
        if ( isFire ) {
            return;
        }

        try {
            // IE下加载BODY后即可正常执行doScroll()
            document.documentElement.doScroll("left");
        } catch( error ) {
            // 循环执行doScroll
            setTimeout( doScrollCheck, 1 );
            return;
        }

        // doScroll成功后执行队列
        fireReadyEvent();
    }

    // 移除绑定事件并执行队列
    function unbindReady(){
        if(document.addEventListener){
            //标准浏览器支持DOMContentLoaded事件
            document.removeEventListener('DOMContentLoaded',unbindReady,false);
            fireReadyEvent();
        }else if(document.attachEvent){
            if(document.readyState === 'complete'){
                // IE浏览器支持complete事件
                document.detachEvent('onreadystatechange',unbindReady);
                fireReadyEvent();
            }
        }
    }

    bindReady();
    window.onload = function(){
        console.log('LOAD加载完毕!');
    }

    addReadyEvent(function(){
        console.log('DOM加载完毕1!');
    });
    addReadyEvent(function(){
        console.log('DOM加载完毕22!');
    })
    addReadyEvent(function(){
        console.log('DOM加载完毕33!');
    })

 

分享到:
评论

相关推荐

    jQuery源码分析之Event事件分析

    第三个问题就是如何得到domReady的状态。 6.1 event的包裹 浏览器的事件兼容性是一个令人头疼的问题。IE的event在是在全局的window下, 而mozilla的event是事件源参数传入到回调函数中。还有很多的事件处理方式也...

    解决浏览器页面加载问题

    判断不同浏览器的页面加载方法 //js是否加载完成 scriptReady:false, //DOM结构是否加载完成 domReady:false,

    jquery 新建的元素事件绑定问题解决方案

    如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用,下面与大家分享四种解决方法

    requirejs-domready-2.0.1-1.zip

    jamppa.zip,jamppa是一个xmpp客户机/组件库

    domReady:跨浏览器 DOM 就绪事件检测

    准备好 跨浏览器 DOM 就绪事件检测功能,能够在 DOM 加载和交互后对任意数量的回调进行排队。 用法 domReady ( function ( ) { // dom is loaded! } ) ;

    前端项目-domready.zip

    前端项目-domready,modern domready

    domReady的实现案例

    下面小编就为大家带来一篇domReady的实现案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JS DOMReady事件的六种实现方法总结

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。 原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如...

    一些主流JS框架中DOMReady事件的实现小结

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。

    前端项目-require-domReady.zip

    前端项目-require-domReady,An AMD loader plugin for detecting DOM ready

    jQuery-LCN-Range-Select

    如果添加属性data-auto-init,则在触发domReady事件时,输入元素将自动增强。 <input type="text" class="range-select" data-auto-init value="0;100"> 3.包括脚本和样式 <link rel="stylesheet" href...

    domReady:Bower-domReady

    domReady 一个用于检测DOM就绪的AMD加载程序插件。 已知可在RequireJS中使用,但应在支持相同加载器插件API的其他AMD加载器中运行。 文件 请参阅。 最新发布 最新版本可从“最新”标签获得。 执照 麻省理工学院 ...

    domready:domReady 的 Shim 存储库

    准备好 Shim 存储库。 包管理器 : components-domready : components/domready : components/domready

    JS仿JQuery选择器功能

    JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑、使用方法与JQuery一致 function ZQuery(arg){ this.elements = [];...

    JScript tricks-crx插件

    将您自己JavaScript(由JQuery提供支持)和/或CSS添加到任何页面。 ####应用开发已暂停####此应用允许您将自己JavaScript或CSS技巧注入到任何页面(按域)。 您可以使用漂亮的编辑器(来自CodeMirror),它具有漂亮...

    jquery构造器的实现代码小结

    jQuery的$符号非常神奇,它可以接受一个字符,也可以接受一个文档对象或window对象,亦可以传个函数进行变为domReady加载器

Global site tag (gtag.js) - Google Analytics