当前位置：首页 > JavaScript

js实现ready

2026-03-14 15:08:05JavaScript

实现DOM加载完成事件

在JavaScript中，DOM加载完成是一个关键事件，通常需要确保脚本在DOM完全加载后执行。以下是几种实现方法：

使用DOMContentLoaded事件

现代浏览器支持DOMContentLoaded事件，它在HTML文档完全加载和解析后触发，无需等待样式表、图像等外部资源：

js实现ready

document.addEventListener('DOMContentLoaded', function() {
    // DOM已完全加载，可以安全操作DOM元素
    console.log('DOM fully loaded and parsed');
});

传统window.onload方法

window.onload会在整个页面（包括所有依赖资源如图片）加载完成后触发：

window.onload = function() {
    // 整个页面包括所有资源已加载完成
    console.log('All resources finished loading');
};

兼容旧浏览器的ready函数

对于需要兼容老旧浏览器的情况，可以封装一个跨浏览器的ready函数：

js实现ready

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

// 使用示例
ready(function() {
    console.log('DOM ready via custom function');
});

jQuery的$(document).ready()

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

$(document).ready(function() {
    // jQuery方式的DOM ready
    console.log('jQuery DOM ready');
});

// 简写形式
$(function() {
    console.log('jQuery shorthand ready');
});

检测document.readyState

通过检查document.readyState属性可以了解文档当前加载状态：

if (document.readyState === 'complete') {
    // 文档已完全加载
} else {
    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            // 文档加载完成处理
        }
    });
}

每种方法适用于不同场景，现代Web开发推荐优先使用DOMContentLoaded事件，它比window.onload更早触发且不等待外部资源。需要兼容IE8及以下版本时，可采用检测readyState的备用方案。