Pourquoi l'événement « onload » ne se déclenche-t-il pas lors de l'ajout d'un élément de script à l'aide de jQuery ?

Problème d'événement OnLoad avec la balise de script

Lors d'une tentative de chargement de scripts dans une séquence, un problème survient lorsque l'événement onload ne parvient pas à se déclencher . L'extrait de code suivant illustre le problème :

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

L'événement onload ne se déclenche pas lorsque l'élément de script est ajouté au DOM à l'aide de jQuery ($body.append(el)). Cependant, l'utilisation du JavaScript natif document.body.appendChild(el) déclenche l'événement comme prévu.

Solution :

Pour résoudre ce problème, modifiez le code comme suit :

function loadScripts(scripts){
    var script = scripts.shift();
    var el = document.createElement('script');
    $body.append(el);
    el.onload = function(script){
        console.log(script + ' loaded!');
        if (scripts.length) {
            loadScripts(scripts);
        }
        else {
            console.log('run app');
            MK.init();
        }
    };
    el.src = script;
}

En attachant le script au DOM avant de définir l'attribut src, l'événement onload se déclenchera comme prévu. De plus, pensez à utiliser la méthode getScript() de jQuery pour la compatibilité entre navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!