0

以下のスクリプトを作成しました。これは、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")
    }
}
4

1 に答える 1

0

だから私は問題を理解し、コメント付きのコード全体を投稿しました：

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];
            }
        }
    }
}
于 2013-08-09T16:14:23.293 に答える