当前位置：首页 > JavaScript

js 实现ready

2026-02-02 10:43:17JavaScript

js 实现ready

实现 JavaScript 的 `ready` 事件

在 JavaScript 中，ready 事件通常用于在 DOM 完全加载后执行代码，而不需要等待图片或其他资源加载完成。以下是几种常见的实现方法：

使用 `DOMContentLoaded` 事件

document.addEventListener('DOMContentLoaded', function() {
    // 在这里编写 DOM 加载完成后执行的代码
});

兼容旧版浏览器的实现

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

ready(function() {
    // 在这里编写 DOM 加载完成后执行的代码
});

jQuery 风格的实现

(function(win, doc) {
    var ready = function(fn) {
        if (doc.readyState === 'complete') {
            return fn();
        }

        doc.addEventListener('DOMContentLoaded', fn, false);
        win.addEventListener('load', fn, false);
    };

    win.ready = ready;
})(window, document);

ready(function() {
    // 在这里编写 DOM 加载完成后执行的代码
});

支持多次调用的实现

var readyCallbacks = [];
var isReady = false;

function ready(fn) {
    if (isReady) {
        fn();
    } else {
        readyCallbacks.push(fn);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    isReady = true;
    readyCallbacks.forEach(function(fn) {
        fn();
    });
    readyCallbacks = [];
});

ready(function() {
    // 第一次调用
});

ready(function() {
    // 第二次调用
});

这些方法都可以实现类似 jQuery $(document).ready() 的功能，选择哪种方法取决于项目的具体需求和浏览器兼容性要求。

js 实现ready