当前位置：首页 > JavaScript

js实现ready

2026-02-01 16:06:18JavaScript

JavaScript 实现 ready 事件

在 JavaScript 中，ready 事件指的是当 DOM 完全加载并解析后触发的事件，而不需要等待图片、样式表等外部资源加载完成。以下是几种实现 ready 事件的常见方法。

使用 DOMContentLoaded 事件

DOMContentLoaded 事件是原生 JavaScript 提供的事件，当 HTML 文档完全加载和解析后触发，无需等待外部资源。

document.addEventListener('DOMContentLoaded', function() {
    // DOM 完全加载后执行的代码
    console.log('DOM is ready');
});

使用 jQuery 的 ready 方法

如果项目中使用了 jQuery，可以直接使用其提供的 ready 方法。

$(document).ready(function() {
    // DOM 完全加载后执行的代码
    console.log('DOM is ready with jQuery');
});

或者使用简写形式：

$(function() {
    // DOM 完全加载后执行的代码
    console.log('DOM is ready with jQuery shorthand');
});

兼容旧版浏览器的实现

对于需要兼容旧版浏览器（如 IE8 及以下）的情况，可以使用以下代码：

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

ready(function() {
    console.log('DOM is ready with cross-browser support');
});

检查 document.readyState

通过检查 document.readyState 属性，可以判断 DOM 是否已经加载完成。

function ready(fn) {
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setTimeout(fn, 0);
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(function() {
    console.log('DOM is ready with readyState check');
});

使用 window.onload

window.onload 事件会在所有资源（包括图片、样式表等）加载完成后触发，适用于需要等待所有资源加载的场景。

window.onload = function() {
    console.log('All resources are loaded');
};

综合实现

以下是一个综合了多种方法的实现，确保在各种情况下都能正确触发 ready 事件：

js实现ready

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

ready(function() {
    console.log('DOM is ready with comprehensive support');
});

以上方法可以根据项目需求选择使用，推荐优先使用 DOMContentLoaded 事件或 jQuery 的 ready 方法。