同时加载执行多个js函数addLoadEvent()

本文介绍了一个用于处理页面加载事件的JavaScript函数,通过该函数可以确保页面加载完成后执行特定的代码块,实现更好的用户体验和资源管理。
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}
### 如何在网页完全加载后运行JavaScript函数 要在网页完全加载后运行JavaScript函数,可以通过多种方式实现。以下是几种常见的方法及其特点: #### 方法一:`<body>` 的 `onload` 属性 可以直接在 `<body>` 标签中定义 `onload` 属性来指定要执行函数[^1]。 ```html <body onload="myFunction()"> <script> function myFunction() { console.log("页面已完全加载"); } </script> </body> ``` 这种方法简单直观,但在实际开发中较少使用,因为它会将逻辑嵌入到 HTML 结构中,不利于维护。 --- #### 方法二:`window.onload` 事件 通过 JavaScript 设置 `window.onload` 函数,在整个页面(包括外部资源)加载完成后触发[^2]。 ```javascript window.onload = function() { console.log("窗口已经完全加载"); }; ``` 需要注意的是,如果多次赋值给 `window.onload`,后面的赋值会覆盖之前的函数[^3]。为了避免这种情况,可以使用以下技巧: ##### 使用匿名函数包裹多个函数 ```javascript window.onload = function() { funcA(); funcB(); funcC(); }; function funcA() { /* 执行某些操作 */ } function funcB() { /* 执行某些操作 */ } function funcC() { /* 执行某些操作 */ } ``` ##### 或者使用 `addLoadEvent` 动态添加多个回调 ```javascript function addLoadEvent(func) { const oldOnload = window.onload; if (typeof window.onload !== 'function') { window.onload = func; } else { window.onload = function() { if (oldOnload) { oldOnload(); } func(); }; } } // 添加多个函数 addLoadEvent(function() { console.log('第一个函数'); }); addLoadEvent(function() { console.log('第二个函数'); }); ``` 这种方式更加灵活,适合需要注册多个回调的情况。 --- #### 方法三:jQuery 的 `$(document).ready()` 方法 对于使用 jQuery 的项目,推荐使用 `$(document).ready()` 来监听 DOM 加载完成的时间点。此方法会在 DOM 完全构建好时立即执行,无需等待所有资源(如图片)加载完成。 ```javascript $(document).ready(function() { console.log("DOM 已经准备好"); }); ``` 或者更简洁的形式: ```javascript $(function() { console.log("DOM 已经准备好"); }); ``` 注意,虽然 `$(document).ready()` 和 `window.onload` 都用于检测页面加载状态,但它们的行为不同。前者仅关注 DOM 构建完成,后者则需等到所有资源加载完毕才会触发。 --- #### 方法四:现代 ES6+ 的异步加载支持 随着 ECMAScript 版本的发展,也可以采用模块化的方式动态导入脚本并延迟执行。例如,结合 `async/await` 实现复杂的初始化流程。 ```javascript (async function initPage() { await new Promise((resolve) => window.addEventListener('load', resolve)); console.log("页面已完全加载"); })(); ``` 这种做法适用于复杂场景下的按需加载和分阶段初始化。 --- ### 总结 以上介绍了四种主要的方式来确保 JavaScript 代码在网页完全加载后再执行。具体选择取决于项目的实际情况和技术栈需求。如果是纯原生环境,优先考虑 `window.onload`;如果有 jQuery 支持,则可选用其提供的 `$(document).ready()` 方法;而对于现代化应用,建议探索基于 Promises 的异步编程模式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值