onload事件的傲娇处理

发表于 | 分类于

如果我们在文档未加载完前执行了脚本，而该脚本中需要用到还没被加载的元素，此时网站的效果将会不符合我们的预期。因此我们通常将JS放到</body>结束标签之前，以此来加快文档加载速度且尽量在执行JS前加载完文档。但此时脚本仍然有可能使用到还没有被加载的元素，例如后期的脚本会动态修改页面元素。
为了保证在</body>加载完后才执行我们的函数，我们可以使用到window对象的onload方法，当网页加载完毕时会触发onload事件，因此我们可以将需要执行的函数例如prepareFunc绑定到事件 window.onload上。
此外，我们可能不仅需要绑定prepareFunc，还需要绑定prepareFunc2、prepareFunc3等等等。你可能写成：

1
2
 window.onload = prepareFunc; 
window.onload = prepareFunc2;
但每个事件处理函数只能绑定一条指令，因此后一句指令将覆盖前一句指令，实际绑定上的函数只有prepareFunc2一个。
一种比较简单的解决方式是：给onload指定一个匿名函数，并将我们要绑定的函数包括在里面。
1
2
3
4
window.onload = function(){
	prepareFunc();
	prepareFunc2();
}
但素，作为一名有追求的程序员，我们应该用更高级的方法来实现这个步骤，而不是每次手动修改onload指令。让我们编写自己的模块化onload时间处理函数，命名为addLoadFunc，逻辑如下。之后每次绑定onload事件函数都可以直接调用addLoadFunc而不用担心被覆盖。
1
2
3
4
5
6
7
8
9
10
11
12
13
 function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
addLoadEvent(prepareFunc);
addLoadEvent(prepareFunc2);