Tentative de déclenchement de l'événement onload sur la balise de script

100

J'essaye de charger un ensemble de scripts dans l'ordre, mais l'événement onload ne se déclenche pas pour moi.

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

Je suppose que les événements natifs comme el.onload ne se déclenchent pas lorsque jQuery est utilisé pour ajouter l'élément au DOM. Si j'utilise natif, document.body.appendChild(el)il se déclenche comme prévu.

chovy
la source
visitez: thi lien: stackoverflow.com/questions/4845762/… Ceci est utilisé fuull
Jitesh

Réponses:

143

Vous devez définir l' srcattribut après l' onloadévénement, par exemple:

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

Vous devez également ajouter le script au DOM avant de joindre l' onloadévénement:

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

N'oubliez pas que vous devez vérifier la readystateprise en charge d'IE. Si vous utilisez jQuery, vous pouvez également essayer la getScript()méthode: http://api.jquery.com/jQuery.getScript/

David Hellsing
la source
11
cela ne résout pas le problème. Mais si j'utilise juste à la document.body.appendChild(el)place de $ ('body'). Append (el); puis l'événement onload se déclenche comme prévu.
chovy
34
pouvez-vous m'aider à comprendre pourquoi la commande est importante?
chovy
12
@David Pourquoi ne pas ajouter l'élément en dernier, comme recommandé dans des endroits comme html5rocks.com/en/tutorials/speed/script-loading ? Cela devrait rendre l'ordre dans lequel vous ajoutez l'écouteur d'événements et définissez le srcin non pertinent.
Stuart P. Bentley
3
Je suis curieux: pourquoi est-il important d'attacher un élément au DOM avant de définir les attributs onloadet src?
Jake Wilson
1
Si le script est mis en cache, dès que vous ajoutez le src, l'élément est chargé et onload ne se déclenche pas. L'ajout de onload avant le src garantira que onload se déclenche pour les scripts mis en cache.
JonShipman