Dynamisch laden mehrere JS-Dateien und feuern einen Rückruf, wenn alle bereit sind

Ich habe mehrere JS und CSS-Dateien, die dynamisch an das DOM mit JavaScript angehängt werden müssen. Die beschriebene Methode here funktioniert gut für 1 Datei. Allerdings habe ich einige von ihnen, und sie sollten in bestimmten Reihenfolge angehängt/geladen werden:Dynamisch laden mehrere JS-Dateien und feuern einen Rückruf, wenn alle bereit sind

var resources = { 
    "jquery" : "jquery.js", 
    "jqueryui" : "jquery_ui.js", 
    "customScript" : "script.js" 
}

Wenn es ankommt - die Ressourcen in einem Array sein können, anstatt in einem Objekt.

Was ich denke, sollte getan werden, jede nächste Ressource in den Rückruf des vorherigen zu laden. Und der Rückruf der letzten Ressource sollte eine andere Funktion aufrufen, die in meinem Fall den HTML-Code rendert. Ich bin mir jedoch nicht sicher, wie ich es mit dem Code im obigen Link organisieren soll. Ein weiterer wichtiger Aspekt ist, dass dies mit reinem JavaScript gemacht werden sollte.

Irgendwelche Hinweise?

Danke!

Quelle

2016-04-14 cycero

Ich würde vorschlagen, dass Sie ein Array Ihrer Ressourcen anstelle eines Objekts erstellen, wenn Sie die Reihenfolge ihres Ladens interessieren. Ich hoffe, diese Lösung wird Ihr Problem lösen.

var urls = ['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js', 
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.slim.js' 
]; 

var i = 0; 

var recursiveCallback = function() { 
    if (i++ < urls.length) { 
    loadScript(urls[i], recursiveCallback) 
    } else { 
    alert('Loading Success !'); 
    } 
} 

loadScript(urls[0], recursiveCallback); 

function loadScript(url, callback) { 

    var script = document.createElement("script") 
    script.type = "text/javascript"; 

    if (script.readyState) { //IE 
    script.onreadystatechange = function() { 
     if (script.readyState == "loaded" || 
     script.readyState == "complete") { 
     script.onreadystatechange = null; 
     callback(); 
     } 
    }; 
    } else { //Others 
    script.onload = function() { 
     callback(); 
    }; 
    } 

    script.src = url; 
    document.getElementsByTagName("head")[0].appendChild(script); 
}

Arbeits Fiddle: https://jsfiddle.net/nikdtu/6uj0t0hp/

Quelle

2016-04-14 18:02:34

@cycero Ihre Begrüßung! –

-1

Ich habe nicht getestet, aber im Konzept sollte dies funktionieren. Schleife durch dein Objekt. Jedes Mal, wenn Sie ein Skriptelement durchlaufen, erstellen Sie ein Skriptelement und fügen dann Ihr Skript der Quelle des gerade erstellten Skriptelements hinzu. Holen Sie sich das letzte Skript Ihrer Ressource() und vergleichen Sie es mit resource[key], wenn sie äquivalent sind rufen Sie die onload Funktion, wird dies feststellen, wenn das letzte Skript geladen ist.

Quelle

2016-04-14 18:00:53 Anthony

Ich glaube, Sie haben die Aussage über bestimmte Reihenfolge verpasst. Ihre Lösung verwendet Objektschlüssel, die nicht immer geordnet werden können (obwohl dies in den meisten Fällen der Fall ist). –

Sie können diesen Link für mehr Einsicht verweisen. Link: http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order –

Er scheint nicht zu seinem Objekt hinzuzufügen, also würde es nicht immer bestellt werden oder täusche ich mich ? – Anthony

-1

Wenn Sie nicht über alten Browser kümmern können Sie die folgende Änderung, um sie zu laden.

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Stack Overflow</title> 
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"> 
    <script type="text/javascript" src="scripts/loader.js" ></script> 
</head> 
<body> 
    <h1>Test javascript loading strategy</h1> 
    <p id="result">Loading...</p> 
    <p>Date: <input type="text" id="datepicker"></p> 

</body> 
</html>

loader.js

function loadScript(url){ 

    return new Promise(function(resolve, reject) { 

     var script = document.createElement("script") 
     script.type = "text/javascript"; 

     if (script.readyState){ //IE 
      script.onreadystatechange = function(){ 
       if (script.readyState == "loaded" || 
         script.readyState == "complete"){ 
        script.onreadystatechange = null; 
        resolve(); 
       } 
      }; 
     } else { //Others 
      script.onload = function(){ 
       resolve(); 
      }; 
     } 

     script.src = url; 
     document.getElementsByTagName("head")[0].appendChild(script); 

    }); 
} 

var resources = [ 
    "scripts/jquery.js", 
    "scripts/jquery_ui.js", 
    "scripts/script.js" 
] 

function loadAllResources() { 
    return resources.reduce(function(prev, current) { 

    return prev.then(function() { 
     return loadScript(current); 
    }); 

    }, Promise.resolve()); 
} 

loadAllResources().then(function() { 
    $('#result').text('Everything loaded'); 
});

benutzerdefinierten Skript script.js

$("#datepicker").datepicker();

Workin g JSFiddle

Quelle

2016-04-14 18:54:04 vl4d1m1r4

Dynamisch laden mehrere JS-Dateien und feuern einen Rückruf, wenn alle bereit sind

Antwort

Verwandte Themen