js 实现ready

在 JavaScript 中实现 ready 功能

ready 功能通常用于确保 DOM 完全加载后再执行脚本，类似于 jQuery 的 $(document).ready()。以下是几种实现方法：

使用 DOMContentLoaded 事件

监听 DOMContentLoaded 事件，确保 DOM 加载完成后执行代码：

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

兼容旧版浏览器的实现

对于不支持 DOMContentLoaded 的旧版浏览器（如 IE8），可以使用以下兼容性方案：

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

ready(function() {
    // 需要执行的代码
});

纯 JavaScript 的 ready 函数封装

封装一个类似 jQuery ready 的函数：

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

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

使用 defer 属性

在引入脚本时使用 defer 属性，确保脚本在 DOM 加载后执行：

<script src="script.js" defer></script>

这些方法可以根据具体需求选择使用，现代浏览器推荐优先使用 DOMContentLoaded 事件。