顺序Javascript加载程序不尊重顺序
Sequential Javascript loader not respecting order
我创建了以下脚本,结合了我对JS的理解,以及对流行脚本的一些研究,如lazyload.JS、head.JS、yepnope.JS…
我需要它以非阻塞的方式加载javascript文件,我需要它很短,要内联使用,它需要是纯javascript。它在Chrome和Firefox上都能工作,但在IE 9上坏了(不尊重顺序),这可能是什么问题?
lazyLoader = {
load: function (scripts) {
lazyLoader.nodes = []
lazyLoader.queue = [scripts];
for (i = 0; i < lazyLoader.queue[0].length; ++i) {
var element = document.createElement("script");
element.type = "text/javascript"
element.src = lazyLoader.queue[0][i];
element.async = false;
element.defer = true;
element.onload = function () {
this.onload = null;
}
element.onreadystatechange = function() {
if (this.readyState == "loaded" || this.readyState == "complete" ) {
this.onreadystatechange = null;
lazyLoader.loaded();
console.log ("The script ", this.src, " is ready!")
}
}
lazyLoader.nodes.push(element)
}
for (i = 0; i < lazyLoader.nodes.length; ++i) {
console.log ("The script ", lazyLoader.nodes[i].src, " will be appended.")
document.body.appendChild(lazyLoader.nodes[i])
}
},
loaded: function() {
console.log ("Loaded")
}
}
所以我发现了问题,我发布了完整的评论代码:
smallLoader = {
load: function (scripts) {
// The queue for the scripts to be loaded
smallLoader.queue = scripts;
smallLoader.pendingScripts = [];
// There will always be a script in the document, at least this very same script...
// ...this script will be used to identify available properties, thus assess correct way to proceed
var firstScript = document.scripts[0];
// We will loop thru the scripts on the queue
for (i = 0; i < smallLoader.queue.length; ++i) {
// Evaluates if the async property is used by the browser
if ('async' in firstScript ) {
// Since src has to be defined after onreadystate change for IE, we organize all "element" steps together...
var element = document.createElement("script");
element.type = "text/javascript"
//... two more line of code than necessary but we add order and clarity
// Define async as false, thus the scripts order will be respected
element.async = false;
element.src = smallLoader.queue[i];
document.head.appendChild(element);
}
// Somebody who hates developers invented IE, so we deal with it as follows:
// ... In IE<11 script objects (and other objects) have a property called readyState...
// ... check the script object has said property (readyState) ...
// ... if true, Bingo! We have and IE!
else if (firstScript.readyState) {
// How it works: IE will load the script even if not injected to the DOM...
// ... we create an event listener, we then inject the scripts in sequential order
// Create an script element
var element = document.createElement("script");
element.type = "text/javascript"
// Add the scripts from the queue to the pending list in order
smallLoader.pendingScripts.push(element)
// Set an event listener for the script element
element.onreadystatechange = function() {
var pending;
// When the next script on the pending list has loaded proceed
if (smallLoader.pendingScripts[0].readyState == "loaded" || smallLoader.pendingScripts[0].readyState == "complete" ) {
// Remove the script we just loaded from the pending list
pending = smallLoader.pendingScripts.shift()
// Clear the listener
element.onreadystatechange = null;
// Inject the script to the DOM, we don't use appendChild as it might break on IE
firstScript.parentNode.insertBefore(pending, firstScript);
}
}
// Once we have set the listener we set the script object's src
element.src = smallLoader.queue[i];
}
}
}
}
相关文章:
- 如何在angularjs中按顺序执行多数据ng应用程序
- 引导程序 3:行堆叠顺序
- 如何在node.js应用程序中的mongodb中按层次结构顺序插入数据
- 如何使用requireJs以正确的顺序定义控制器,路由器和应用程序
- Javascript文件只能在Rails应用程序中按字母顺序工作
- 在Phonegap应用程序中按顺序运行函数
- 使用纯 JavaScript 更改事件处理程序执行的顺序
- 如何维护HTML头部/正文块加载到流星应用程序的顺序
- 如何使用字形引导程序更改按钮文本并保留顺序
- 角度观察程序和事件侦听程序的执行顺序
- 为什么布尔值的顺序会影响此程序
- 顺序Javascript加载程序不尊重顺序
- 如何仅在事件按特定顺序发生时触发jquery事件处理程序
- Angular:自定义事件处理程序的顺序&默认处理程序
- 事件处理程序的JavaScript执行顺序
- 确保两个处理程序按特定顺序完成
- 如何确定javascript或jquery中事件处理程序的触发顺序
- 同一事件和节点上的事件处理程序以相反的顺序运行
- main.js电子中程序的执行顺序(其中nodejs的child_process的exec也被使用)
- JavaScript事件处理程序的执行顺序