JS 网页加载后执行多个函数

本文介绍了一种在网页加载完成后调用特定函数的方法。通过检查窗口加载事件的状态,确保旧的加载事件能够保留,并在此基础上追加新的函数执行。这种方法适用于需要在页面完全加载后执行初始化或其他操作的场景。

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

//网页载入后调用
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

 

转载于:https://www.cnblogs.com/nb08611033/p/8464589.html

<think>我们已经在之前的回答中提供了一个使用纯JavaScript的解决方案。现在,根据用户的问题,用户希望动态加载多个JS文件并等待全部加载完成(按顺序)后执行特定函数。 我们之前的函数`loadScriptsSequentially`已经实现了这个功能,但为了更符合当前的问题描述,我们可以再提供一次,并确保考虑到引用[1]和引用[2]中的信息。 引用[1]提到可以使用jQuery或纯JavaScript,但用户没有要求使用jQuery,所以我们使用纯JavaScript。 引用[2]提到了`window.onload`和`$(document).ready()`的区别,但我们的场景是动态加载脚本,所以不直接使用这两个事件,而是使用每个脚本的onload事件来串联。 我们将: 1. 按顺序加载脚本,前一个加载完成后再加载下一个。 2. 所有脚本加载完成后执行回调函数同时,我们考虑避免重复加载(如果同一个脚本URL已经加载过,则跳过)。 注意:我们设置`async=false`,虽然这不会影响加载的并行性(因为动态加载的脚本默认是异步的),但设置`async=false`后,脚本的执行顺序会与加载顺序一致(即按插入顺序执行)。但是,我们通过顺序加载(一个接一个)来保证执行顺序。 实际上,动态创建的脚本默认是异步的,但浏览器会按照它们被添加到文档中的顺序执行。所以,我们通过顺序添加(并且等待前一个加载完成再添加下一个)来确保顺序。 以下是完整的函数:</think>在HTML中动态加载多个JavaScript文件并确保全部按顺序加载完成后执行特定函数,可以通过以下方法实现: ### 纯JavaScript解决方案(推荐) ```javascript // 记录已加载脚本的URL(避免重复加载) const loadedScripts = new Set(); function loadScriptsSequentially(scripts, callback) { let index = 0; function loadNext() { // 所有脚本加载完成时执行回调 if (index >= scripts.length) { if (callback) callback(); return; } const src = scripts[index++]; const absoluteUrl = new URL(src, window.location.href).href; // 跳过已加载的脚本 if (loadedScripts.has(absoluteUrl)) { loadNext(); return; } const script = document.createElement('script'); script.src = src; script.async = false; // 确保执行顺序 script.onload = () => { loadedScripts.add(absoluteUrl); loadNext(); // 加载下一个脚本 }; script.onerror = () => { console.error(`脚本加载失败: ${src}`); loadNext(); // 即使失败也继续加载后续脚本 }; document.head.appendChild(script); } loadNext(); // 开始加载序列 } ``` ### 使用示例 ```javascript // 需要加载的脚本列表(按依赖顺序排列) const scriptUrls = [ 'https://cdn.example.com/library1.js', 'libs/library2.js', 'app/main.js' ]; // 所有脚本加载完成后执行 loadScriptsSequentially(scriptUrls, () => { console.log('所有脚本加载完成!'); initializeApp(); // 自定义初始化函数 }); ``` ### 关键特性说明 1. **顺序加载机制**: - 通过递归调用`loadNext()`确保前一个脚本加载完成后再加载下一个 - 设置`async=false`保证执行顺序与加载顺序一致[^2] 2. **避免重复加载**: - 使用`Set`记录已加载脚本的绝对URL - 标准化URL处理不同格式的路径(如相对路径/绝对路径) 3. **错误处理**: - 脚本加载失败时输出错误信息但仍继续后续加载 - 可扩展为添加重试机制或错误回调 4. **执行时机**: - 所有脚本加载并执行完成后触发回调函数 - 比`window.onload`更精准控制(后者需等待所有资源加载)[^2] ### 替代方案:Promise实现 ```javascript function loadScript(src) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = src; script.async = false; script.onload = () => resolve(src); script.onerror = () => reject(new Error(`加载失败: ${src}`)); document.head.appendChild(script); }); } async function loadScriptsInOrder(urls, callback) { for (const url of urls) { try { await loadScript(url); } catch (error) { console.error(error.message); } } if (callback) callback(); } ``` ### 注意事项 1. **依赖管理**: - 脚本列表顺序必须反映实际依赖关系 - 模块化项目建议使用ES6 Modules替代动态加载 2. **性能优化**: ```html <!-- 生产环境建议合并脚本 --> <script src="bundle.min.js" defer></script> ``` 3. **兼容性**: - 上述方案兼容所有现代浏览器 - 如需支持IE11,需添加`onreadystatechange`处理[^1] 通过这种方法,您可以确保多个JavaScript文件按指定顺序加载并执行,所有操作完成后安全地执行初始化函数[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值