js实现ready
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 事件：
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 方法。
