页面载入完成以后会触发一个事件,这个事件是附加在窗口对象的onload事件。
1.可以在最后添加window.onload = 函数名;
但是如果是多个事件,写成 window.onload = 函数名1;
window.onload = 函数名2;这样只有函数2会被执行。
所以 为此我们可以创建一个匿名函数,让它在页面加载后就执行。
window.onload = function(){
window.onload = 函数名1;
window.onload = 函数名2;这样只有函数2会被执行。
}
这样就方便多了。有几个函数,加到里面就可以了。
2.但是其实还存在一个最佳的解决方案——不管你打算在页面加载完毕后要执行多少个函数,利用该函数都可以轻松的实现。
该函数名为addLoadEvent。该函数仅一个参数:该参数指定了你打算在页面加载完毕后需要执行的函数的函数名。
addLoadEvent()函数代码如下:
代码如下:
对这段代码自己的理解。
func1 被加入 ,但是不执行,接着func2加入,它把func1踢掉,并且把值赋给oldonload 然后func3加入,把func2踢掉,这样func2的值也赋值给oldonload。这样 oldonload就含有func1和func2两个函数。然后这时候 window。onload就已经是函数了。然后他们3个同时执行else里面新赋值的函数 。
function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
} else{
window.onload = function(){
oldonload();
func();
}
}
}
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
} else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent( func1 );
addLoadEvent( func2 );
addLoadEvent( func3 );
addLoadEvent( func2 );
addLoadEvent( func3 );
1、把现有的window.onload事件处理函数的值存入到oldonload中。
2、如果在这个处理函数上还没有绑定任何函数,就将该函数添加给它。
3、如果在这个处理函数上已经绑定了一些函数,就把该函数追加到现有指定的末尾。
通过addLoadEvent函数,只需要调用该函数就可以进行绑定了。
代码如下:
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以这个函数非常有用,尤其当代码变得很复杂的时候。无论你打算在页面加载完毕时执行多少个函数,只需要多写几条这样的语句就可以解决了。方便、实用。
addLoadEvent(secondFunction);