javascript 事件加载与预加载

192 阅读 0 评论 127 点赞

我是靠谱客的博主高贵魔镜，最近开发中收集的这篇文章主要介绍javascript 事件加载与预加载，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

通常来说，window.onload就够用了，如果想加载多个事件，我们可以采取以下方式：

复制代码代码如下:

 
window.onload = function(){ 
func1(); 
func2(); 
func3(); 
//更多加载事件……………… 
} 

但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！

复制代码代码如下:

 
//后台代码 
<script type="text/javascript"> 
window.onload = function(){ 
func1(); 
func2(); 
//加载普通用户用到的脚本…… 
} 
</script> 
<%# 以下脚本是为管理员准备的 %> 
<% if @user.role == "manager" %> 
window.onload = function(){ 
func1(); 
func2(); 
//加载机密脚本…… 
} 
<% end %> 

这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。

复制代码代码如下:

 
var loadEvent = function(fn) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 

它非常完美地解决了互相覆盖的问题，用法如下：

复制代码代码如下:

 
loadEvent(func1); 
loadEvent(func2); 
loadEvent(func3); 
//更多加载事件 

但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。

复制代码代码如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(fn){ 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像onclick,onload,onmouseout等这样函数，W3C把它们归属于DOM0的事件模型，好处是适用范围广，但签于其性能，于是又提出DOM1.0的事件模型与DOM2.0的事件模型，DOM2就是原微软的事件模型与原网景的事件模型的合璧，既能捕获又能冒泡，而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来，我们用addEvent来改造我们的事件加载。

复制代码代码如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

OK，没问题。上面的onReady函数有一个可选参数，用于是否待图片加载。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。

复制代码代码如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定 iframe的内容是否加载完毕。我们继续改进它。

复制代码代码如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"v1"){ 
if(window.self == window.top){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.attachEvent("onreadystatechange", function(){ 
if ( document.readyState === "complete" ) { 
document.detachEvent( "onreadystatechange", arguments.callee ); 
init(); 
} 
}); 
} 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。

复制代码代码如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(loadEvent) { 
if(!+"v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
loadEvent(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", loadEvent, false ); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 