스크립트 태그에서 onload 이벤트를 시작하려고합니다.


100

일련의 스크립트를 순서대로로드하려고하는데 onload 이벤트가 발생하지 않습니다.

    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;
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
    }

    loadScripts(scripts);

el.onload와 같은 네이티브 이벤트는 jQuery를 사용하여 요소를 DOM에 추가 할 때 발생하지 않는다고 생각합니다. 네이티브 document.body.appendChild(el)를 사용하면 예상대로 실행됩니다.


방문 : 생 링크 : stackoverflow.com/questions/4845762/... 이 사용 fuull입니다
Jitesh

답변:


143

당신은 설정해야합니다 src속성 onload 이벤트를 f.ex :

el.onload = function() { //...
el.src = script;

또한 이벤트 첨부 하기 전에 DOM에 스크립트를 추가해야합니다 onload.

$body.append(el);
el.onload = function() { //...
el.src = script;

readystateIE 지원 을 확인해야합니다 . jQuery를 사용하는 경우 http://api.jquery.com/jQuery.getScript/getScript() 메소드를 사용해 볼 수도 있습니다 .


11
그것은 실제로 그것을 고치지 않습니다. 하지만 document.body.appendChild(el)$ ( 'body'). append (el); 대신 사용하면 그런 다음 onload 이벤트가 예상대로 발생합니다.
chovy

34
주문이 중요한 이유를 이해하도록 도와 줄 수 있습니까?
chovy

12
@David html5rocks.com/en/tutorials/speed/script-loading 과 같은 곳에서 권장하는대로 요소를 마지막에 추가하지 않는 이유는 무엇 입니까? 그러면 이벤트 리스너를 추가하고 설정하는 순서 src가 무관하게됩니다.
Stuart P. Bentley

3
궁금합니다. onloadsrc속성을 설정하기 전에 DOM에 요소를 첨부하는 것이 왜 중요한 가요?
Jake Wilson

1
스크립트가 캐시 된 경우 src를 추가하자마자 항목이로드되고 onload가 실행되지 않습니다. src 앞에 onload를 추가하면 캐시 된 스크립트에 대해 onload가 실행됩니다.
JonShipman
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.