web-dev-qa-db-fra.com

Essayer de déclencher l'événement onload sur une balise script

J'essaie 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 tels que 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.

javascriptjqueryonload
85
chovy

Vous devez définir l'attribut src après l'événement onload, f.ex:

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

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

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

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

121
David Hellsing