여러 스크립트를 순차적으로 로드할 때 내 스크립트 온로드 이벤트가 트리거되지 않는 이유는 무엇입니까?

스크립트 온로드 이벤트가 발생하지 않음

일련의 스크립트를 순차적으로 로드하려고 하면 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() 메소드는 스크립트 로딩을 위한 편리한 대안을 제공합니다.

위 내용은 여러 스크립트를 순차적으로 로드할 때 내 스크립트 온로드 이벤트가 트리거되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!