Sys.ScriptLoader与JS加载进度条的实现(1)
点击次数：39 次 发布日期：2008-11-26 12:31:07 作者：源代码网
|
源代码网推荐 我不知道，不过实现一个不难，因为<script />有onload和onreadystatechange。还有就是，我们有Atlas。 源代码网推荐 源代码网推荐 Atlas中有个类：Sys.ScriptLoader，它的作用就是在页面中依次地加载多个Script文件。在实现之前，先来分析一下这个类的代码。 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 1Sys.ScriptLoader = function() { 源代码网推荐 2 源代码网推荐 3 // 所有Script的reference对象数组。 源代码网推荐 4 var _references; 源代码网推荐 5 // 所有Script加载完之后执行的回调函数。 源代码网推荐 6 var _completionCallback; 源代码网推荐 7 // 执行回调函数时提供的上下文（参数）。 源代码网推荐 8 var _callbackContext; 源代码网推荐 9 源代码网推荐 10 // 当前正在加载的Script的HTTP Element（<script />）。 源代码网推荐 11 var _currentLoadingReference; 源代码网推荐 12 // 当前的Script加载完成后所调用的回调函数。 源代码网推荐 13 var _currentOnScriptLoad; 源代码网推荐 14 源代码网推荐 15 // ScriptLoader唯一的方法，传入三个参数，参数含义不再赘述。 源代码网推荐 16 this.load = function(references, completionCallback, callbackContext) { 源代码网推荐 17 _references = references; 源代码网推荐 18 _completionCallback = completionCallback; 源代码网推荐 19 _callbackContext = callbackContext; 源代码网推荐 20 源代码网推荐 21 loadReferences(); 源代码网推荐 22 } 源代码网推荐 23 源代码网推荐 24 // 开始加载引用。 源代码网推荐 25 function loadReferences() { 源代码网推荐 26 // 如果当前正在加载某个Script。 源代码网推荐 27 // 这表示此方法不是第一次被调用，而是在某个Script被加载 源代码网推荐 28 // 完成后才被调用，用以加载下一个Script。 源代码网推荐 29 if (_currentLoadingReference) { 源代码网推荐 30 // 查看当前Script元素的readyState，IE下为complete， 源代码网推荐 31 // 其他浏览器如FF则为loaded（FF其实并无此属性， 源代码网推荐 32 // 但是下面的代码会将其设为loaded）。 源代码网推荐 33 // 如果加载失败，则退出。 源代码网推荐 34 if ((_currentLoadingReference.readyState != "loaded") && 源代码网推荐 35 (_currentLoadingReference.readyState != "complete")) { 源代码网推荐 36 return; 源代码网推荐 37 } 源代码网推荐 38 else { 源代码网推荐 39 // 进入此分支，表明加载成功。 源代码网推荐 40 源代码网推荐 41 // 如果当前Script定义了onLoad函数。 源代码网推荐 42 if (_currentOnScriptLoad) { 源代码网推荐 43 // 通过eval调用（这里是个麻烦的地方）。 源代码网推荐 44 eval(_currentOnScriptLoad); 源代码网推荐 45 // 设为null，释放资源。 源代码网推荐 46 _currentOnScriptLoad = null; 源代码网推荐 47 } 源代码网推荐 48 源代码网推荐 49 // 将相关事件设为null以确保释放资源。 源代码网推荐 50 if (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) { 源代码网推荐 51 // 如果当前浏览器不是IE，见下面的代码 源代码网推荐 52 // 会发现为<script />定义了onload事件。 源代码网推荐 53 _currentLoadingReference.onload = null; 源代码网推荐 54 } 源代码网推荐 55 else { 源代码网推荐 56 // 如果是IE，见下面代码会发现为了 源代码网推荐 57 // <script />定义了onreadystatechange事件。 源代码网推荐 58 _currentLoadingReference.onreadystatechange = null; 源代码网推荐 59 } 源代码网推荐 60 源代码网推荐 61 // 最终释放当前的<script />引用。 源代码网推荐 62 _currentLoadingReference = null; 源代码网推荐 63 } 源代码网推荐 64 } 源代码网推荐 65 源代码网推荐 66 // 如果还有没有加载的Script。 源代码网推荐 67 if (_references.length) { 源代码网推荐 68 // 出队列。 源代码网推荐 69 var reference = _references.dequeue(); 源代码网推荐 70 // 创建<script /> 源代码网推荐 71 var scriptElement = document.createElement("script"); 源代码网推荐 72 // 设当前的<script />和当前加载成功的回调函数。 源代码网推荐 73 _currentLoadingReference = scriptElement; 源代码网推荐 74 _currentOnScriptLoad = reference.onscriptload; 源代码网推荐 75 源代码网推荐 76 if (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) { 源代码网推荐 77 // 如果不是IE的话，那么为<script />设属性readyState， 源代码网推荐 78 // 并且使用onload事件。 源代码网推荐 79 scriptElement.readyState = "loaded"; 源代码网推荐 80 scriptElement.onload = loadReferences; 源代码网推荐 81 } 源代码网推荐 82 else { 源代码网推荐 83 // 如果是IE，那么使用onreadystatechange事件。 源代码网推荐 84 scriptElement.onreadystatechange = loadReferences; 源代码网推荐 85 } 源代码网推荐 86 scriptElement.type = "text/javascript"; 源代码网推荐 87 scriptElement.src = reference.url; 源代码网推荐 88 源代码网推荐 89 // 将<script />添加至DOM 源代码网推荐 90 var headElement = document.getElementsByTagName("head")[0]; 源代码网推荐 91 headElement.appendChild(scriptElement); 源代码网推荐 92 源代码网推荐 93 return; 源代码网推荐 94 } 源代码网推荐 95 源代码网推荐 96 // 如果执行到这里，说明所有的Script已经加载完了。 源代码网推荐 97 // 如果定义了所有Script加载完之后执行的回调函数， 源代码网推荐 98 // 那么执行并释放资源。 源代码网推荐 99 if (_completionCallback) { 源代码网推荐 100 var completionCallback = _completionCallback; 源代码网推荐 101 var callbackContext = _callbackContext; 源代码网推荐 102 源代码网推荐 103 _completionCallback = null; 源代码网推荐 104 _callbackContext = null; 源代码网推荐 105 源代码网推荐 106 completionCallback(callbackContext); 源代码网推荐 107 } 源代码网推荐 108 源代码网推荐 109 _references = null; 源代码网推荐 110 } 源代码网推荐 111} 源代码网推荐 112Sys.ScriptLoader.registerClass("Sys.ScriptLoader"); 源代码网推荐 可以看出，Sys.ScriptLoader加载script的方法就是通过代码依次向<header />里添加<script />元素。事实上，它在Atlas中被使用的非常少。 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
