等待页面加载

告诉浏览器要在页面全部加载完之后再运行js:

function init()

{

var planet = document.getElementById ("greenplanet");

planet.innerHTML = "Red Alert";

}


window.onload = init;   //使用window对象的onload属性,运行函数

在JavaScript中,确保页面完全加载后再执行某些操作是非常重要的,因为如果在文档尚未完成加载时就尝试访问某些资源(如DOM元素),可能会导致错误或者预期的行为失效。以下是一些常见的方法来等待页面加载完成: 1. **使用DOMContentLoaded事件**: ```javascript window.addEventListener('DOMContentLoaded', function () { // 页面内容已全部解析完毕,可以开始执行操作 console.log('页面已经加载完成'); // ...其他代码... }); ``` 2. **使用window.onload**: ```javascript window.onload = function () { // 当页面所有资源(包括图片)都加载完成后,执行这里的代码 console.log('页面加载完成'); }; ``` 3. **使用MutationObserver** 和 `childList` 属性: ```javascript let observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length || mutation.removedNodes.length) { // 页面结构发生改变,检查是否加载完成(比如DOMContentLoaded) // 如果已完成,移除观察者并继续执行 observer.disconnect(); // ...执行操作... } }); }); observer.observe(document.body, { childList: true, subtree: true }); // 观察一段时间,如果没有新的变化,则认为页面加载完成 setTimeout(function() { if (!observer.disconnecting) { observer.disconnect(); // 页面加载完成 } }, 5000); ``` 4. **使用Promise-based APIs** 如`fetch` 或 `async/await`: ```javascript async function waitForLoad() { return new Promise((resolve) => { window.addEventListener('load', resolve); }); } await waitForLoad().then(() => { console.log('页面加载完成'); // ...其他代码... }); ``` 记住,上述方法并非绝对可靠,因为有些资源可能是异步加载的,尤其是现代网站常用的AJAX技术。理想情况下,你应该结合多种方法来判断页面是否真正加载完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值