[转帖]Mootools源码分析-24 -- domready

MooTools DOMReady 实现

最新推荐文章于 2015-01-05 20:03:04 发布

weixin_30417487

最新推荐文章于 2015-01-05 20:03:04 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maapaa/articles/mootools-s-24.html

本文介绍了一种使用MooTools实现DOMReady事件的方法，该方法使脚本能够提前于页面完全加载时运行，提高了网页性能。适用于不同浏览器环境。

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-404366

原作者：我佛山人

// 本部分代码主要为window/document添加domready事件,domready事件由于不考虑文档中加载的资源,
// 只考虑dom节点,所以这事件通常会发生在onload之前,而对于脚本的操作,
// 通常只针对dom,所以使用它将会让你的脚本提前执行.可以看这里的示例:http://demos.mootools.net/DomReadyVS.Load

// 自定义事件的onAdd方法,在添加事件监听时调用
Element.Events.domready = {
    onAdd: function (fn)    {
         // 如果在domready之后添加监听,直接执行
         if (Browser.loaded)    fn.call( this );
    }
};

( function ()    {
     var domready = function ()    {
         // 避免重复触发事件
         if (Browser.loaded)     return ;
         // dom加载完成标记
        Browser.loaded = true ;
         // 触发添加到window上的事件监听
        window.fireEvent( ' domready ' );
         // 触发添加到document上的事件监听
        document.fireEvent( ' domready ' );
    };
     // 不同的浏览器有不同的dom加载完成判断方法
     switch (Browser.Engine.name)    {
     // Safari之类的浏览器
     case ' webkit ' : ( function ()    {
         // 文档状态只要包含loaded或complete就算domready
         // 即使本函数为匿名函数,仍然能通过arguments.callee取得引用
        ([ ' loaded ' , ' complete ' ].contains(document.readyState)) ? domready() : arguments.callee.delay( 50 );
    })(); break ;
     // IE的判断稍微复杂一点
     case ' trident ' :
     // 创建一个临时div节点
         var temp = document.createElement( ' div ' );
         // 又一个匿名函数,可以避免再次执行外面整个匿名函数
        ( function ()    {
            ($ try ( function ()    {
                 // 只要能让temp节点向左滚动即表明domready
                temp.doScroll( ' left ' );
                 return $(temp).inject(document.body).set( ' html ' , ' temp ' ).dispose();
            })) ? domready() : arguments.callee.delay( 50 );
        })();
         break ;
     // 标准浏览器的处理
     default :
         // window上的load事件
        window.addEvent( ' load ' , domready);
         // document上的DOMContentLoaded事件
        document.addEvent( ' DOMContentLoaded ' , domready);
    }
})();

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-24.html