为什么按顺序加载多个脚本时我的脚本 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中文网其他相关文章！