js实现ready

实现DOM加载完成事件

在JavaScript中检测DOM加载完成有多种方法，以下是常见的实现方式：

使用DOMContentLoaded事件

document.addEventListener('DOMContentLoaded', function() {
    // DOM已完全加载和解析
    console.log('DOM已加载完成');
});

传统ready方法实现

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(function() {
    console.log('DOM准备就绪');
});

兼容旧浏览器的方案

function ready(fn) {
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

jQuery风格的ready实现

(function() {
    var funcs = [];
    var ready = false;

    function handler(e) {
        if (ready) return;
        if (e.type === 'readystatechange' && document.readyState !== 'complete') return;

        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }

        ready = true;
        funcs = null;
    }

    document.addEventListener('DOMContentLoaded', handler);
    document.addEventListener('readystatechange', handler);
    window.addEventListener('load', handler);

    window.ready = function(fn) {
        if (ready) {
            fn.call(document);
        } else {
            funcs.push(fn);
        }
    };
})();

ready(function() {
    console.log('DOM准备就绪');
});

注意事项

DOMContentLoaded事件在HTML文档被完全加载和解析后触发，无需等待样式表、图像和子框架的完成加载。这与window.onload事件不同，后者需要等待所有资源加载完毕。

对于现代浏览器，直接使用DOMContentLoaded事件是最佳选择。如果需要支持非常旧的浏览器(如IE8及以下)，可能需要使用readystatechange事件作为备选方案。

以上实现方案可以根据具体需求选择使用，第一种方案最简单直接，最后一种方案最接近jQuery的ready功能实现。