判断页面加载完成的核心方法有三种：使用domcontentloaded事件、load事件和document.readystate属性；2. domcontentloaded事件在html文档解析完成、dom树构建完毕时触发，适合需要操作dom的场景，执行时机早于load事件；3. load事件在页面所有资源（如图片、css、脚本等）完全加载后触发，适用于需确保所有资源可用的逻辑；4. document.readystate属性提供加载状态的实时信息，其值为”loading”、”interactive”（对应domcontentloaded）和”complete”（对应load事件），可结合事件监听或直接判断使用；5. 一般情况下优先使用domcontentloaded以提升响应速度，若需操作图片尺寸或确保样式完全加载则应使用load事件；6. 针对加载超时，可通过settimeout设置超时机制，在规定时间内未触发load则执行降级处理；7. 对于动态内容加载，应使用promise链或回调函数在数据渲染完成后执行后续逻辑，而非依赖页面原生加载事件；8. mutationobserver可用于监听特定dom元素的插入，适用于无法控制加载逻辑但需知道元素何时出现的场景；9. 懒加载使部分资源延迟加载，load事件无法反映所有内容状态，应结合intersectionobserver监听元素进入视口并监听其load事件来判断加载完成；10. 预加载通过提前加载资源优化性能，但仍受load事件等待，不影响“完全加载”的定义。选择合适的方法需根据具体需求权衡执行时机与资源依赖。
JavaScript判断页面加载完成，核心是利用浏览器提供的几个关键机制：
DOMContentLoaded
事件、
load
事件，以及
document.readyState
属性。它们各自代表了页面生命周期的不同阶段，理解它们能帮助我们精准控制代码执行时机。
解决方案
DOMContentLoaded
事件当HTML文档被完全加载和解析完成，DOM树构建完毕，但像图片、样式表等外部资源可能还没加载完成时触发。这个事件非常适合需要操作DOM的代码，因为它不会等待所有资源加载，响应更快。
document.addEventListener('DOMContentLoaded', () => { console.log('DOM is ready! (HTML parsed, but resources might still be loading)'); // 可以在这里操作DOM元素，例如给按钮添加事件监听器 const myButton = document.getElementById('myBtn'); if (myButton) { myButton.addEventListener('click', () => { alert('Button clicked!'); }); }});
load
事件当整个页面，包括所有依赖的资源（如图片、CSS、JavaScript文件等）都已加载完成时触发。如果你需要确保所有视觉元素都已呈现，或者脚本依赖于所有外部资源，那么
load
事件是更稳妥的选择。
window.addEventListener('load', () => { console.log('Page and all resources are fully loaded!'); // 页面所有内容都已可用，适合执行需要所有资源就绪的逻辑 // 例如，获取图片实际尺寸，或启动依赖所有CSS的复杂布局 const img = document.getElementById('myImage'); if (img) { console.log('Image dimensions:', img.naturalWidth, img.naturalHeight); }});
document.readyState
属性这个属性提供了文档加载状态的实时信息。它有三个可能的值：
loading
: 文档仍在加载中。
interactive
: 文档已经完成解析，但外部资源仍在加载中（类似于
DOMContentLoaded
触发时）。
complete
: 文档和所有子资源都已完全加载完成（类似于
load
事件触发时）。你可以通过检查这个属性来判断当前状态，或者结合事件监听来处理。
if (document.readyState === 'complete') { console.log('Page already loaded (readyState is complete) when this script ran.'); // 如果脚本在load事件之后才加载，直接检查这个状态很有用} else { window.addEventListener('load', () => { console.log('Page loaded via load event (readyState was not complete initially).'); });}// 也可以在不同阶段做判断console.log('Current document.readyState:', document.readyState);
有时候，如果你的脚本是在页面加载后期才动态插入或执行的，直接检查
document.readyState === 'complete'
就显得很有必要，避免错过
load
事件。
DOMContentLoaded
DOMContentLoaded
和
load
事件，我到底该用哪个？
这确实是个让人纠结的问题，我个人经验是，大部分时候，
DOMContentLoaded
就足够了。它更快，因为它只关心DOM结构是否准备好，而不用傻傻地等待所有图片、字体甚至广告脚本加载完。你想想，如果一个页面有很多大图或者外部字体文件，
load
事件可能要等很久，用户体验会受影响。如果你只是想操作页面上的元素，比如给按钮添加点击事件，或者初始化一些UI组件，
DOMContentLoaded
是首选，因为DOM树已经在那了，你完全可以开始工作。
但也有例外。比如，如果你需要获取图片的实际尺寸（在CSS中设置的尺寸不算，要等图片真正加载进来才有），或者需要确保所有CSS都已应用，避免页面闪烁（FOUC），那
load
事件就显得更可靠。再比如，一些第三方统计脚本或者广告脚本，它们通常会要求在页面完全加载后才执行，以确保所有数据都能被正确捕获，这时候
window.onload
就派上用场了。选择哪个，真的取决于你的具体需求和对性能的考量。
面对加载慢或动态内容，如何更健壮地判断页面状态？
嗯，现实往往比理想骨感。页面加载慢，或者内容是动态通过AJAX/Fetch加载进来的，原生的
DOMContentLoaded
和
load
事件就显得有点力不从心了。
对于加载慢，尤其是外部资源加载失败的情况，
load
事件可能永远不会触发，或者触发得很晚。这时，你可能需要一些超时机制。比如，你可以设置一个计时器，如果在一定时间内
load
事件还没触发，就认为加载失败或者超时。
const loadTimeout = setTimeout(() => { console.warn('Page load timed out after 10 seconds. Some resources might not have loaded.'); // 可以触发一些错误处理或降级逻辑，例如显示一个加载失败的提示 document.body.classList.add('load-failed');}, 10000); // 10秒超时window.addEventListener('load', () => { clearTimeout(loadTimeout); console.log('Page fully loaded within timeout.'); document.body.classList.add('load-complete');});
更复杂的场景是动态内容。如果页面初始化时DOM是空的，内容是JS异步加载并插入的，那么
DOMContentLoaded
和
load
事件可能在你内容还没影儿的时候就触发了。这种情况下，你判断的就不是“页面加载完成”，而是“特定内容加载完成”。这就需要更精细的控制了：
回调函数/Promise链: 在异步请求数据并渲染完成后，执行你的后续逻辑。这是最常见且推荐的做法。当你发起一个API请求，然后在数据返回后渲染DOM，你的“加载完成”点就是渲染结束的那一刻。
fetch('/api/data') .then(response => response.json()) .then(data => { // 根据数据渲染页面 const contentDiv = document.getElementById('dynamic-content'); contentDiv.textContent = data.message; console.log('Dynamic content loaded and rendered!'); // 此时，可以认为特定内容已加载完成 }) .catch(error => { console.error('Error loading dynamic content:', error); });
MutationObserver
: 如果你需要监控DOM树的任意变化，例如某个特定的元素被添加到页面中，
MutationObserver
是一个强大的API。它可以监听DOM节点的增删改，让你在特定元素出现时执行代码。虽然这不直接是“页面加载完成”，但对于判断动态内容是否就绪非常有用。
// 示例：监听某个特定ID的元素是否被添加到body中const observer = new MutationObserver((mutationsList, observer) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { const targetElement = document.getElementById('my-dynamic-content'); if (targetElement) { console.log('Dynamic content element is now in the DOM!'); // 在这里执行依赖于该动态内容的逻辑，例如初始化该元素上的JS组件 targetElement.style.color = 'blue'; observer.disconnect(); // 找到后就可以停止观察了 return; } } }});// 开始观察body元素及其子元素的变动observer.observe(document.body, { childList: true, subtree: true });// 模拟异步加载内容并在2秒后插入DOMsetTimeout(() => { const div = document.createElement('div'); div.id = 'my-dynamic-content'; div.textContent = 'This content was loaded dynamically!'; document.body.appendChild(div);}, 2000);
这种方法尤其适用于那些你无法直接控制异步加载逻辑，但又需要知道某个特定DOM元素何时出现的场景，比如处理第三方库或组件的行为。
预加载、懒加载与页面加载状态的关联
说到页面加载完成，就不得不提预加载（Preload）和懒加载（Lazy Load）这些优化手段，它们其实都在某种程度上改变了我们对“页面加载完成”的传统认知。
预加载：它允许你提前加载一些资源，这些资源可能在当前视图中还不需要，但很快就会用到。比如，你可以用
来告诉浏览器，这个图片我很快就要用，你先给我下下来。这会加速后续内容的呈现。在这种情况下，
load
事件可能还是会等待这些预加载资源，但用户感知到的速度会更快，因为资源已经缓存好了。它更多是优化了资源获取的时机，而不是改变了“完全加载”的定义。
懒加载：这个就更有意思了。图片或iframe等资源，只有当它们进入用户视口时才开始加载。这意味着，当
load
事件触发时，页面上可能还有很多图片根本没加载。传统的“页面加载完成”在这里就不那么准确了。对于懒加载的场景，你可能需要结合
IntersectionObserver
来判断特定区域的图片是否已经加载，或者监听图片自身的
load
事件。
// 简单的图片懒加载示例（HTML中img标签使用data-src）// 假设你的HTML结构是这样的：// @@##@@// @@##@@// ...document.addEventListener('DOMContentLoaded', () => { const lazyImages = document.querySelectorAll('img.lazy'); if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; // 将data-src赋值给src，开始加载图片 img.classList.remove('lazy'); // 移除lazy类 observer.unobserve(img); // 停止观察已加载的图片 } }); }, { rootMargin: '0px 0px 100px 0px' }); // 提前100px加载，提升用户体验 lazyImages.forEach(img => { observer.observe(img); }); } else { // Fallback for
以上就是js怎么判断页面是否加载完成的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516852.html
微信扫一扫 
支付宝扫一扫 
