用法如下:

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 加载多个函数的方法的更多相关文章

  1. js window.onload 加载多个函数和追加函数

    平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...

  2. JavaScript window.onload 事件和 jQuery ready 函数有何不同?

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  3. JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  4. javascript的页面加载及性能优化(兼容IE7)

    通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){        func1();        func ...

  5. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  6. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. HTML文档、javascript脚本的加载与解析

    1.onload事件 1.1 onload事件分类 a.文档加载完成事件(包括脚本.图片等资源都加载完),绑定方法:<body onload="doSomething()"& ...

  8. 第一百一十八节,JavaScript,动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  9. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. #C++初学记录(并查集)

    并查集 题目 今天是伊格那丢的生日.他邀请了很多朋友.现在该吃晚饭了.伊格那丢想知道他至少需要多少张桌子.你必须注意到并不是所有的朋友都认识对方,而且所有的朋友都不想和陌生人待在一起.这个问题的一个重 ...

  2. 【OpenCV学习笔记】三十、轮廓特征属性及应用(七)—位置关系及轮廓匹配

    http://blog.csdn.net/abc8730866/article/details/69219992 轮廓特征属性及应用(七)—位置关系及轮廓匹配 1.计算点与轮廓的距离及位置关系——po ...

  3. LCD1602小程序

    1显示数据 typedef struct { unsigned long int mL_data; unsigned long int L_data; unsigned long int M3_dat ...

  4. 【分页问题】elasticsearch 深分页问题以及解决方法

    本文主要参考: 1.https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-scroll.html ...

  5. NOIP2016 T4 魔法阵 暴力枚举+前缀和后缀和优化

    想把最近几年的NOIP T4都先干掉,就大概差16年的,所以来做一做. 然后这题就浪费了我一整天QAQ...果然还是自己太弱了QAQ 点我看题 还是pa洛谷的... 题意:给m个物品,每个物品有一个不 ...

  6. sqlyog注册码

    姓     名(Name):ttrar 序 列 号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c或者(OR)姓     名(Name):ttrar序 列 号(C ...

  7. 利用Html.css OPPO手机导航菜单的制作解析

    <body> <div id="top" class="auto"> <div class="nav"> ...

  8. 下载百度网盘破解 获得 所下载视频URL 粘贴到thunder

    Chrome:方法1. 进入谷歌商城,搜索baidudl.安装即可. 方法2. 下载baidudl.zip.解压获得baidudl文件夹.进入chrome://extensions/,勾选右上角Dev ...

  9. $n,$!等的含义

    $$ Shell本身的PID(ProcessID)$! Shell最后运行的后台命令的PID$? 上一个运行的命令是否成功的标志,成功为0,失败不为0$* 所有参数列表.如"$*" ...

  10. 30道Spring面试题和答案

    Spring 概述 1. 什么是spring? Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring ...