javascript 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.onload 不能同时加载多个函数。
比如:
代码如下:
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
后面会把前面的覆盖,上面代码只会输出 b。
此时可用如下方法解决:
window.onload =function() { t(); b(); }
另一种解决方法如下:
代码如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
使用如下:
代码如下:
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
} addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于 window.onload =function() { t(); b(); c() ;}
说明:上面的写法是window.onload加载多个函数写法:
理解:如果(typeof window.onload != 'function')也就是说window.onload还没有被赋值,就直接把它赋值为func。否则,说明有程序先对其赋值了,那么在页面加载完成之后,应该先执行现有函数再执行自己的新的func。这里现有函数是oldonload()有问题,因为没有赋值。应该是:
else {
var oldonload = window.onload;
window.onload=function(){oldonload();func();}
}
这里先用oldonload变量把现有的window.onload存下来。然后【应该先执行现有函数再执行自己的新的func】是两件事。为了按顺序完成两件事,所以这里又多写了一个函数,函数内容是{oldonload();func();}然后这个函数被赋值给了window.onload。
个人以为直接使用隐式函数(如:window.onload =function() { t(); b(); c() ;})更快捷,当然使用 addLoadEvent 更professional,各取所好吧!
javascript window.onload 加载多个函数的方法的更多相关文章
- js window.onload 加载多个函数和追加函数
平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别
js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...
- javascript的页面加载及性能优化(兼容IE7)
通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){ func1(); func ...
- Javascript兑现图片预加载【回调函数,多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- HTML文档、javascript脚本的加载与解析
1.onload事件 1.1 onload事件分类 a.文档加载完成事件(包括脚本.图片等资源都加载完),绑定方法:<body onload="doSomething()"& ...
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- 内存记号(Memory Trail)[自定义的名字] --调试方法
即使你把输出导向到文件中,运转记录花费的时间所带来的冲击,仍然足够改变程序的执行结果.如果要改善这种情况,我必须回到一个我所谓的“Memory Trails”(内存记号)的低阶技术中.为了使用 mem ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 分页组件vue和jsp版本
vue版本 <template> <div class="com-vscroll"> <slot name="mcontent"& ...
- AVAudioFoundation(6):时间和媒体表示
本文转自:AVAudioFoundation(6):时间和媒体表示 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 基于时间的 ...
- [one day one question] 部分ios版本 在display: inline-block时候不支持flex
问题描述: 部分ios 在display: inline-block时候不支持flex,这怎么破? 解决方案: so easy,不要使用display: inline-block;就行啦 君生我未生, ...
- MySQL "Zero date value prohibited" 问题解析
问题起因 之前一直使用Oracle数据,对MySQL数据库使用不多,因此搞不懂MySQL的日期“0000-00-00 00:00:00”对程序会产生怎样的影响.费了我一下午的时间 -_-^^. 首先: ...
- dependencyManagement、parent与dependencies
本文总结自:https://www.cnblogs.com/feibazhf/p/7886617.html 当我们的项目很多时,为了适应子项目的依赖项使用统一的版本,我们可以创建一个parent项目来 ...
- 2017-2018-1 Java小组-1623 第一周作业
2017-2018-1 Java小组-1623 第一周作业 <构建之法>学习笔记及团队成员介绍 1. 学习内容 概论 个人技术和流程 软件工程师的成长 两人合作 团队和流程 敏捷流程 实战 ...
- 模块的封装之C语言类的继承和派生
[交流][微知识]模块的封装(二):C语言的继承和派生 在模块的封装(一):C语言的封装中,我们介绍了如何使用C语言的结构体来实现一个类的封装,并通过掩码结构体的方式实 现了类成员的保护.这一部分,我 ...
- myeclipse删除项目后重新导入
今天安装了myeclipse2017版,刚开始导入项目后然后删除了,发现再次导入进来的时候不可以了. 解决方法:点击file -- >switch workspace -- >other ...