js 实现ready
实现 DOM 加载完成的 ready 事件
在 JavaScript 中，ready 事件通常指 DOM 加载完成但其他资源（如图片）可能尚未加载完毕的状态。以下是几种实现方式：
使用 DOMContentLoaded 事件
现代浏览器支持 DOMContentLoaded 事件，它在 DOM 树构建完成后触发，无需等待外部资源加载：
document.addEventListener('DOMContentLoaded', function() {
// DOM 已完全加载，可以安全操作
console.log('DOM ready');
});兼容老式浏览器的实现
对于旧版 IE 浏览器（IE8 及以下），需通过检测 document.readyState 实现兼容：
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// 使用示例
ready(function() {
console.log('DOM fully loaded');
});jQuery 风格的 $(document).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 ready with jQuery-like syntax');
});注意事项
- 该方法不等待样式表、图片或子框架加载，仅保证 DOM 可操作。
- 如需等待所有资源加载完成，应使用
window.onload事件。 - 现代项目建议直接使用
DOMContentLoaded或defer脚本标签。
