為什麼按順序載入多個腳本時我的腳本 Onload 事件沒有觸發？

腳本 Onload 事件未觸發

嘗試順序載入一系列腳本時，onload 事件無法觸發。檢查下面的程式碼可以發現問題：

<code class="javascript">var scripts = [
        '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
        MK.host+'/templates/templates.js'
    ];

    function loadScripts(scripts){
        var script = scripts.shift();
        var el = document.createElement('script');
        el.src = script;  // Removed: el.src assignment here
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);  // Added: el appended before onload
        el.src = script;   // Moved: el.src assignment here
    }

    loadScripts(scripts);</code>

這個問題源自於 onload 事件監聽器的錯誤放置和 src 屬性的分配。正確的程式碼是：

<code class="javascript">        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
        el.src = script;</code>

透過確保在附加 onload 事件之前將腳本附加到 DOM，並在 onload 事件之後設定 src 屬性，可以實現預期的行為。此外，需要注意的是，對於 IE 支持，應檢查就緒狀態。對於 jQuery 用戶， getScript() 方法為腳本載入提供了一個方便的替代方法。

以上是為什麼按順序載入多個腳本時我的腳本 Onload 事件沒有觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！