Es wurde versucht, das Onload-Ereignis auf dem Skript-Tag auszulösen

100

Ich versuche, eine Reihe von Skripten der Reihe nach zu laden, aber das Onload-Ereignis wird für mich nicht ausgelöst.

    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);

Ich denke, native Ereignisse wie el.onload werden nicht ausgelöst, wenn jQuery verwendet wird, um das Element an das DOM anzuhängen. Wenn ich native verwende, document.body.appendChild(el)wird es wie erwartet ausgelöst.

chovy
quelle
Besuchen Sie: diesen Link: stackoverflow.com/questions/4845762/… Dies ist die Verwendung von fuull
Jitesh

Antworten:

143

Sie sollten das srcAttribut nach dem onloadEreignis festlegen, z.

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

Sie sollten das Skript auch an das DOM anhängen, bevor Sie das onloadEreignis anhängen :

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

Denken Sie daran, dass Sie nach readystateIE-Unterstützung suchen müssen. Wenn Sie jQuery verwenden, können Sie auch die folgende getScript()Methode ausprobieren : http://api.jquery.com/jQuery.getScript/

David Hellsing
quelle
11
das behebt es eigentlich nicht. Aber wenn ich nur document.body.appendChild(el)anstelle von $ ('body') verwende. Append (el); dann wird das Onload-Ereignis wie erwartet ausgelöst.
Chovy
34
Können Sie mir helfen zu verstehen, warum die Bestellung wichtig ist?
Chovy
12
@ David Warum nicht das letzte Element anhängen, wie an Stellen wie html5rocks.com/de/tutorials/speed/script-loading empfohlen ? Das sollte die Reihenfolge, in der Sie den Ereignis-Listener hinzufügen und in festlegen, srcirrelevant machen.
Stuart P. Bentley
3
Ich bin neugierig: Warum ist es wichtig, ein Element an das DOM anzuhängen, bevor Sie die Attribute onloadund srcfestlegen?
Jake Wilson
1
Wenn das Skript zwischengespeichert ist, wird das Element geladen, sobald Sie den src hinzufügen, und der Onload wird nicht ausgelöst. Durch Hinzufügen des Onloads vor dem src wird sichergestellt, dass der Onload für zwischengespeicherte Skripts ausgelöst wird.
JonShipman