js实现页面加载完成执行函数

本文介绍了一种在页面加载完成后执行特定任务的方法,并通过定时器确保在页面完全加载后触发,展示了如何使用JavaScript实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//本demo为当页面加载完成后执行任务,再退出定时执行方法的状态
var interval = setInterval(function(){
     //获取当前页面状态
    var status = document.readyState;
    if(status=="complete"){        //当前页面加载完毕后执行
            //设置制度目录树的选中效果和列表中表单显示情况
            alert("demo");
            clearInterval(interval);           //退出定时执行方法状态
        }
    }
},1000);    //1s执行一次方法

 

<think>我们参考了多个引用,特别是引用[1]和引用[2]中提到了两种主要方法:使用window.onload和window.addEventListener('load',...)。同时,引用[1]还提到了如果只需要DOM结构加载完成而不需要等待所有资源(如图片)加载完成,可以使用DOMContentLoaded事件。根据用户的问题,我们需要在网页加载完成执行特定代码。这里有两种情况:1.等待整个页面(包括所有资源如图片、音频等)加载完成:使用load事件。2.等待DOM树构建完成(即HTML结构解析完成,但可能还有一些资源未加载完成):使用DOMContentLoaded事件。因此,我们可以提供两种方法。另外,引用[3]提到了Javascript代码在页面加载时的执行顺序,即按照在HTML中出现的顺序执行。但这里我们关注的是页面加载完成的事件。引用[4]提到了JavaScript的编译和执行流程,但与我们当前问题关系不大。下面我们给出具体实现方法。</think>### JavaScript 在网页加载完成执行代码的方法 在 JavaScript 中实现网页加载完成执行代码,主要有以下三种方式: #### 1. 使用 `window.onload` 方法 ```javascript window.onload = function() { // 页面所有资源(包括图片、视频等)加载完成执行 console.log('页面完全加载完毕'); // 这里添加你的执行代码 }; ``` - **特点**:等待所有资源加载完成才会触发 - **注意**:只能绑定一个处理函数(后定义的会覆盖前面的) #### 2. 使用 `addEventListener('load')` 方法 ```javascript window.addEventListener('load', function() { // 页面完全加载执行 console.log('所有资源加载完成'); // 这里添加你的执行代码 }); ``` - **优点**:可绑定多个事件处理函数 - **兼容性**:支持所有现代浏览器 #### 3. 使用 `DOMContentLoaded` 事件(推荐) ```javascript document.addEventListener('DOMContentLoaded', function() { // DOM树构建完成后立即执行(无需等待图片等资源) console.log('DOM已准备就绪'); // 这里添加你的执行代码 }); ``` - **最佳实践**:大多数场景首选此方法 - **优势**:在 HTML 解析完成后立即触发,无需等待外部资源 - **执行时机**:比 `load` 事件早 50-100ms[^1] ### 执行时机对比 | 事件类型 | 触发时机 | 等待资源 | |-------------------|----------------------------------|----------| | `DOMContentLoaded` | HTML 解析完成/DOM 树构建完毕 | ❌ 不等待 | | `load` | 页面所有资源加载完成(图片/CSS) | ✅ 需等待 | ### 示例代码 ```html <script> // 方式1:DOM准备就绪时执行 document.addEventListener('DOMContentLoaded', initPage); function initPage() { // 页面初始化操作 document.getElementById('title').textContent = '页面已就绪!'; // 方式2:所有资源加载执行 window.addEventListener('load', function() { console.log('图片等资源已加载完成'); }); } </script> ``` ### 注意事项 1. 脚本位置:将脚本放在 `<body>` 末尾可避免阻塞渲染 2. 异步加载:使用 `async` 或 `defer` 属性优化脚本加载[^4] 3. 多次绑定:`addEventListener` 支持绑定多个处理函数,而 `onload` 会覆盖之前定义 4. 兼容性:`DOMContentLoaded` 在 IE9+ 支持,旧版 IE 可使用 `document.onreadystatechange`[^3] > **最佳实践建议**:优先使用 `DOMContentLoaded` 执行初始化操作,需要操作图片尺寸等资源时再用 `load` 事件补充[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值