首页 > 代码库 > 原生domReady封装

原生domReady封装

2024-07-04 22:39:30   225人阅读

核心思路：

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

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

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

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

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

 

直接上源码了:

    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 onl oad
                    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;
    })();

 

使用方法：

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

    window.onload = function(){
        alert("onload");
    };

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

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

 

 

 


联系
我们