在onload上加载执行多个函数

最新推荐文章于 2024-07-23 16:20:34 发布
原创 最新推荐文章于 2024-07-23 16:20:34 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function

本文介绍了一种在JavaScript中实现加载多个window.onload函数的方法。通过创建addLoadEvent函数来确保即使window.onload已被定义，也可以追加新的加载函数而不会覆盖原有的函数。这种方式使得可以在网页加载完成时执行多个操作。

有时候需要用到window.onload函数，但是window.onload函数已经被赋值过了，如果要想加载多个函数，我们要这么写

 

javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
01-23
然而，当有多个函数需要在页面加载完成后执行时，直接将它们都绑定到`onload`事件可能会导致问题，因为`onload`事件只能处理一个函数。为了解决这个问题，我们可以使用一种技术叫做“事件监听器的封装”，这里以`...
把多个JavaScript函数绑定到onload事件处理函数上的方法
11-22
然而，如果试图将多个函数绑定到同一个`onload`事件处理函数，会遇到问题，因为每个事件处理函数只能关联一个函数。 例如，如果我们有`firstFunction()`和`secondFunction()`两个函数，我们可能会尝试像下面这样...
onload执行多个函数
马如林的IT博客
03-10 5486
<!--function a() { alert("a"); var t = document.getElementById("name").value;  document.getElementById("name").value = t + "xx";}function b() { alert("b");}  // -->   function
window.onload绑定多个要执行的函数
痞子杨
08-18 601
addloadevent(func),该函数指定了在页面加载完毕后需要执行的函数的函数名。 代码： function addloadevent(func){ var oldonload = window.onload; if(typeof window.onload != ‘fu
Onload加载多个方法函数
weixin_30596023的博客
04-26 340
if (window.attachEvent) { window.attachEvent("onload", allLoad); } else if (window.addEventListener) { window.addEventListener("load", allLoad, false); } function allLoad(){ //要加...
页面加载后执行多个函数
时光的博客
09-27 1085
function addLoadEvent(func){    var oldonload = window.onload;  //保存旧的window.onload     if(typeof window.onload !== "function"){  //如果window.onload不是函数         window.onload = func;      //参数直接传给wind...
window.onload同时执行多个函数的解决方法
飞鱼入梦
04-08 445
window.onload同时执行多个函数的解决方法 这个老问题了，也是JavaScript中很多时候都要用到的。现在就把解决方案给总结一下。1.最简单的调用方式直接写到html的body标签里面，如下示例： 程序代码 &lt;html&gt;   &lt;body onload="function()"&gt;   &lt;/body&gt;&lt;/html...
window.addEventListener来解决让一个js事件执行多个函数
10-27
当需要一个事件触发时执行多个函数，单纯地使用`window.onload`或元素的`onclick`等事件处理方式可能会遇到问题，特别是在需要同时处理多个事件处理器时。这时，`window.attachEvent`和`window.addEventListener`就...
js window.onload 加载多个函数的两种方法
12-07 272
window.onload，方法在项目中经常被使用，用法如下： function func(){alert("window的Onload事件被触发啦!");return;} window.onload=func; 或者如下： window.onload=function(){alert("window的Onload事件被触发啦!");return;} 1.问题： 但wind...
关于onload调用多个函数的认识
akon405
08-11 474
首先说一下onload的一个特点：只能有一个onload执行。这就要求我们不能通过onload="function()"来调用多个函数。 这里通过查找到的资料，有这种方式： &lt;script&gt; function t(){ alert("t") } function b(){ alert("b") } function c(){ alert(...
js中onload调用两种方法
duci2的专栏
03-16 2032
js中onload调用两种方法，先加载js再加载页面和先加载页面后加载js window.onload=ShowMessage();   先页面加载过程，直接调用ShowMessage();   方法 2. window.onload=function(){ShowMessage();}   先加载页面，页面加载完毕再调用ShowMessage()
js window.onload 加载多个函数
weixin_30252709的博客
08-13 352
平时做项目 经常需要使用window.onload，用法如下：function func(){alert("this is window onload event!");return;}window.onload=func;或者如下： window.onload=function(){alert("this is window onload event!");return;}但window.on...
微信小程序 onLoad 函数
weixin_33951761的博客
06-01 2022
小程序注册完成后，加载页面，触发onLoad方法。 页面载入后触发onShow方法，显示页面。 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。 当小程序后台运行或跳转到其他页面时，触发onHide方法。 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。 当使用重定向方法wx....
小程序系列：onLoad，onReady和onShow等生命周期函数的区别和使用
热门推荐
FeiChangWuRao的博客
03-21 2万+
小程序请求这部分，我们发现有onLoad，onReady，onShow等都可以调用function发送请求。他们之间有什么区别？首先官方文档先甩出来，这些都是微信页面page这个Object的声明周期函数里面的，其实点进去看定义就可以了，毕竟里面说的很清楚。 微信页面构造，看生命周期函数那边 懒得看文档觉得不直观，我再甩你一张图也是官方的，虽然说你也不可能马上理解但是肯定会让你对小程序的page生...
一个页面中执行两个window.onload函数
van416521的专栏
11-09 7358
1.问题描述: 当一个HTML页面中加载了两个window.onload=function() {};函数时,页面只会执行第二个window.onload里面的内容 如下,结果显示2: test window.onload = function() { alert('1'); }; 表格 window.onlo
执行多个onload被覆盖问题
fairyier
05-07 3386
一个页面执行多个window.onload，会被最后一个覆盖，前面n个的内容得不到执行，如   window.onload = function(){ var para =document.createElement("p"); var info = "NodeName:"; info += para.nodeName; info += " ...
小程序onLoad 和 onShow
涂涂
06-21 3088
onLoad 和 onShow 是小程序页面的生命周期函数，它们在不同的时机触发，具有不同的用途和执行顺序。（2）用于页面的初始化操作，例如获取页面参数（通过 options 参数获取）和其他一次性的设置。注意：从二级页面返回该页面时，onLoad 不会再次加载，而 onShow 会重新执行。（2）页面每次出现在屏幕上都会触发，包括从下级页面返回露出当前页面。（1）onShow 在页面显示或切入前台时触发，可能会多次执行。（1）onLoad 在页面加载时触发，仅执行一次。
微信小程序onLoad函数（options参数和onShow()区别）
J123375644的博客
07-23 3154
调用时机onLoad仅在页面或组件初始化时调用一次；onShow每次页面或组件显示时调用。用途onLoad用于初始化数据和状态；onShow用于刷新或更新页面数据和状态。
window.onload 加载之前的函数
最新发布
03-21
<think>好的，我现在需要帮助用户解决如何在window.onload事件触发前执行函数的问题。根据用户提供的引用内容，我需要先理解现有的信息，然后结合相关知识提出解决方案。 首先，用户提到的引用[1]指出，在IE中可以使用defer属性来延迟脚本执行，直到文档加载完成。这可能类似于window.onload，但只在IE有效。引用[3]提到了$(document).ready()和window.onload的区别，说明前者在DOM就绪后执行，而后者要等所有资源加载完毕。这提示可能有其他方法在DOM准备就绪时提前执行代码。 用户的需求是在window.onload之前运行函数。通常，window.onload会在页面所有资源（如图片、样式表）加载完成后触发，而DOMContentLoaded事件则在DOM树构建完成后触发，不需要等待外部资源。因此，使用DOMContentLoaded事件可能是一个解决方案。此外，jQuery的$(document).ready()也是基于这个事件，所以可以推荐这两种方法。 另外，引用[1]提到的defer属性虽然只适用于IE，但现代浏览器也支持defer，它会让脚本在DOM解析完成后、DOMContentLoaded之前执行。这可能也是一个方法，但需要考虑兼容性。 用户可能需要兼容不同浏览器的解决方案，所以需要综合使用DOMContentLoaded和readystatechange事件来覆盖更多情况。例如，监听document的readystatechange事件，当状态变为interactive时执行函数，这样可以在DOM准备好后立即执行，而不必等待所有资源。 还有，内联脚本或放在<head>中的脚本，使用defer或async属性可能会影响执行时机。但需要注意，defer脚本会在DOMContentLoaded之前执行，而async则可能随时执行，无法保证顺序。 总结可能的解决方案： 1. 使用DOMContentLoaded事件。 2. 使用jQuery的$(document).ready()。 3. 使用readystatechange事件检测document.readyState是否为interactive或complete。 4. 在页面顶部放置同步的<script>标签，但可能阻塞渲染。 5. 使用defer属性延迟脚本执行，但需注意兼容性。 需要验证这些方法的执行顺序和兼容性，确保在window.onload之前执行。同时，要处理不支持某些事件的老旧浏览器，可能需要回退到其他方法。 现在需要将这些思路整理成步骤，给出具体的代码示例，并引用提供的参考资料中的内容，比如引用[1]的defer和引用[3]的document.ready方法。</think>### 如何在 `window.onload` 触发前运行函数？ #### 方法一：使用 `DOMContentLoaded` 事件 `DOMContentLoaded` 事件在 HTML 文档解析完成（DOM 树构建完毕）时触发，无需等待样式表、图片等外部资源加载。这比 `window.onload` 触发更早。 ```javascript document.addEventListener('DOMContentLoaded', function() { console.log('DOM 已加载，早于 window.onload'); }); ``` #### 方法二：使用 `jQuery` 的 `$(document).ready()` 原理与 `DOMContentLoaded` 相同，但兼容性更好（尤其对老旧浏览器）[^3]。 ```javascript $(document).ready(function() { console.log('DOM 就绪，早于 window.onload'); }); ``` #### 方法三：监听 `readystatechange` 事件 通过检测 `document.readyState` 状态实现更细粒度的控制： - `interactive`：DOM 解析完成，但资源可能未加载完。 - `complete`：所有资源加载完成（等同于 `window.onload`）。 ```javascript document.onreadystatechange = function() { if (document.readyState === 'interactive') { console.log('DOM 解析完成，资源加载中'); } }; ``` #### 方法四：直接内联脚本或同步脚本 将脚本直接放在 `<body>` 开头或 `<head>` 中（无 `defer`/`async` 属性），此时脚本会在 DOM 解析时同步执行，但会阻塞渲染。 ```html <script> console.log('内联脚本立即执行'); </script> ``` #### 方法五：使用 `defer` 属性（部分场景适用） 带有 `defer` 属性的脚本会在 DOM 解析完成后、`DOMContentLoaded` 触发前执行，但仅对外部脚本有效[^1]。 ```html <script src="deferred-script.js" defer></script> ``` --- ### 执行顺序总结 1. 同步脚本（内联或非异步外部脚本） 2. `DOMContentLoaded` 事件或 `$(document).ready()` 3. `defer` 脚本（按文档顺序执行） 4. `window.onload` 事件 --- ### 替代方案：预加载关键函数 若需在页面渲染前执行逻辑（如资源预加载），可结合 `Preload` 或 `Prefetch`： ```html <link rel="preload" href="critical.js" as="script"> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值