码迷,mamicode.com
首页 > 其他好文 > 详细

原生domReady封装

时间:2014-05-19 18:46:52      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

核心思路:

标准浏览器(含IE9+)比较简单,直接监听DOMContentLoaded事件;

低版本的IE(IE678)两套机制:

1)尝试轮询document.documentElement.doScroll("left")是否报错,若报错则dom树结构未ready,否则dom ready;

2)监听document的onreadystatechange事件,判断document.readyState是否为"complete"。

参考:http://javascript.nwbox.com/IEContentLoaded/

 

直接上源码了:

bubuko.com,布布扣
    var domReady = (function () {
        var doc = document,
            branch = document.addEventListener ? ‘w3c‘ : ‘ie678‘;

        var _domReady = {
            // When _domReady.done is true,all ‘fn‘ will be invoked immediately.
            done: false,
            // The stack which all functions will be pushed into
            fn: [],
            // push callback functions
            push: function (fn) {
                if (!_domReady.done) {
                    // only bind once
                    if (_domReady.fn.length === 0) {
                        _domReady.bind();
                    }
                    _domReady.fn.push(fn);
                } else {
                    fn();
                }
            },
            // The Real DOMContentLoaded Callback Function
            ready: function () {
                // Flag DOMContentLoaded Event was Done over
                _domReady.done = true;

                var fn = _domReady.fn;
                for (var i = 0, l = fn.length; i < l; i++) {
                    fn[i]();
                }

                _domReady.unbind();
                _domReady.fn = null;
            },
            bind: {
                w3c: function () {
                    doc.addEventListener(‘DOMContentLoaded‘, _domReady.ready, false);
                },
                //IE的监听
                ie678: function () {
                    var done = false,
                        // only fire once
                        init = function () {
                            if (!done) {
                                done = true;
                                _domReady.ready();
                            }
                        };
                    // polling for no errors
                    (function () {
                        try {
                            // throws errors until after ondocumentready
                            doc.documentElement.doScroll(‘left‘);
                        } catch (e) {
                            setTimeout(arguments.callee, 20);
                            return;
                        }
                        // no errors, fire
                        init();
                    })();
                    // trying to always fire before onload
                    doc.onreadystatechange = function () {
                        if (doc.readyState == ‘complete‘) {
                            doc.onreadystatechange = null;
                            init();
                        }
                    };
                }
            }[branch],
            unbind: {
                w3c: function () {
                    doc.removeEventListener(‘DOMContentLoaded‘, _domReady.ready, false);
                },
                ie678: function () { /* Nothing to do */
                }
            }[branch]
        };

        return _domReady.push;
    })();
bubuko.com,布布扣

 

使用方法:

可以尝试跟window.onload做个比较

bubuko.com,布布扣
    window.onload = function(){
        alert("onload");
    };

    domReady(function(){
        alert("domReady 1");
    });

    domReady(function(){
        alert("domReady 2");
    });
bubuko.com,布布扣

 

 

 

原生domReady封装,布布扣,bubuko.com

原生domReady封装

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/mr189/p/3734721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!