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

最新推荐文章于 2025-06-06 12:32:49 发布
原创 最新推荐文章于 2025-06-06 12:32:49 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

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

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

 

javascript实现在页面加载完成后自动执行某个函数
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 1519
javascript实现在页面加载完成后自动执行某个函数
“VueJS中在单组件内实现页面加载完成执行特定函数的方法”
最新发布
07-27
通过这种方式，可以确保函数总是在 Vue 实例完全渲染且 tds 数据加载完成后执行，从而正确操作表格元素，如添加监听事件。这种处理方式对于确保用户界面与数据同步至关重要，尤其是在处理复杂的 UI 交互时。
[zt]js判断页面加载完成
Strive and Thrive !!
07-09 623
<br />如何用js判断页面加载完成？<br /><br /><script> <br /><!--<br />document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. <br />function subSomething() <br />{ <br />if(document.readyState == "complete"&&window.parent.frames["框架名"].document.readyState == "
在网页加载时自动运行js的方法（2025最新）
qq_44136882的博客
06-06 545
网页加载时自动运行JavaScript的常用方法包括：1.通过DOMContentLoaded事件在HTML解析完成后触发；2.使用window.onload等待所有资源加载完成；3.将脚本放在body末尾直接执行；4.使用defer属性延迟执行或async属性异步加载；5.采用IIFE立即执行函数；6.利用Vue的mounted钩子或React的useEffect等框架生命周期方法。需注意不同方法的触发时机和性能影响，DOMContentLoaded比window.onload更快触发但不等候资源加载，d
页面加载完毕后执行事件
banghe8611的博客
01-29 2099
页面加载完成后触发事件很简单， 写这个的原因是因为，每次用到的时候总是忘了怎么写。。。 首先最简单的方法。jquery的一种简写形式： $(function(){ alert("页面加载完成！"); }); 其对应的完整形态为： $(document).ready(function(){ alert("页面加载完成！"); }); ...
js页面加载完后执行js函数 纯js
qq_42394781的博客
10-14 752
var interval =setInterval(function({ var status = document.readyStatus; if(status="complete") clearInterval(interval); }),1000)
页面加载后，js执行函数的写法
Donny's Blog
06-24 250
window.onload = function() {alert('working')}
JavaScript实现当网页加载完成后执行指定函数的方法
10-24
总之，正确地在网页加载完成时执行JavaScript函数对于提升用户体验至关重要。通过上述几种方法，开发者可以根据具体需求选择合适的方式来实现功能。无论是直接绑定函数还是动态添加事件监听，最终目的都是确保在页面...
多种方法实现当jsp页面完全加载完成后执行一个js函数
10-26
在网页开发中，有时我们需要确保页面完全加载后再执行某些JavaScript函数，这有助于保证操作的正确性和用户体验。在JSP页面中，实现这个需求有多种方式。以下将详细讲解标题和描述中提到的几种常见方法： 1. **使用...
一个js的加载函数
白天不懂爷的黑 № 枫间残月
12-07 250
function loadScript(url, callback){ let script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.getElementsByTagName('bo...
让页面加载完成后执行js
even
12-08 646
window.onload = function(){ }
JavaScript 页面加载时调用函数addLoadEvent实现
zamaochick的博客
02-28 530
寒假的时候花了一些时间看了看JavaScript编程艺术，发现里面大量用了addLoadEvent函数，索性就直接把它单独写在了一个js文件里，当用的时候直接调用就行了。这个函数用处广泛，下面给出它的代码： function addLoadEvent(func) { var oldonload=window.onload; if(typeof window.onload!="f...
通用domReady方法，类似于jquery
summer7310的专栏
10-04 810
function myReady(fn){     //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式     if ( document.addEventListener ) {         document.addEventListener("DOMContentLoaded", fn, false);     } else {    
页面加载完成后加载js
chijizhun7209的博客
06-20 232
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; doc...
原生项目怎么在页面加载的时候调用函数
GongWei_的博客
09-27 463
方法一： jquery 中：$(function(){ }） 括号内写你的内容或者函数 方法二： window.οnlοad=function(){}，记住一个js文件里只能存在一个 window.οnlοad=function(){}
javascript 等待文档加载完成
weixin_42515990的博客
08-20 226
我整理的一些关于【Java】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/bLN8S1JavaScript 等待文档加载完成 在网页开发中，JavaScript 是一个非常重要的部分。我们常常需要在文档加载完成后执行某些脚本，以保证用户能够顺利地看到所有内容并与之交互。本文...
js中如何控制所有页面加载完成后，再执行某些方法
热门推荐
冯索的专栏
10-11 1万+
做页面时经常会遇到当前页面加载完成后，执行某些初始化工作。这时候就要知道如何判断页面（包括IFRAME）已经加载完成，代码如下：       document.onreadystatechange = statechange;       function statechange() {         if(document.readystate == 'complete') {  
js页面加载完成执行函数的几种方法对比
qq_42019139的博客
04-15 2723
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式（其中有的只是书写方式不一样）。 1：使用jQuery的$(function){}; 2：使用jquery的$(document).ready(function(){});前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。 3：使用jQuery的$(window).l...
JS实用脚本--页面加载完毕后执行函数
小Z的部落格
10-20 1723
JS实用脚本--页面加载完毕后执行函数
js代码实现网页加载完成执行
06-29
<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、付费专栏及课程。

余额充值