複数のスクリプトを連続してロードすると、スクリプトのオンロード イベントがトリガーされないのはなぜですか?

スクリプト 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 サポートの場合、readystate をチェックする必要があることに注意することが重要です。 jQuery ユーザーにとって、getScript() メソッドはスクリプト読み込みの便利な代替手段を提供します。

以上が複数のスクリプトを連続してロードすると、スクリプトのオンロード イベントがトリガーされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。