Assurez-vous que ces fichiers sont chargés avant d'exécuter un autre script

Question

Salut J'ai une feuille de style et une fonction JavaScript qui charge dans tous les fichiers requis pour ce modèle.

Cependant, j'ai un petit problème à cause du moment où les autres balises de script s'exécutent dans le fichier modèle (plan js code), il n'attend pas le chargement des fichiers requis.

Ainsi, ce qui vous arrive, ce sont les scripts qui ne reconnaissent pas les fonctions et autres fonctions JS.

JS code

<script type="text/javascript"> 
var uid = '{$smarty.session.ipet_user}'; 

    function stylesheet(url) { 
      var s = document.createElement('link'); 
      s.rel = 'stylesheet'; 
      s.async = false; 
      s.href = url; 
      var x = document.getElementsByTagName('head')[0]; 
      x.appendChild(s); 
     } 

     function script(url) { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.async = true; 
      s.src = url; 
      var x = document.getElementsByTagName('head')[0]; 
      x.appendChild(s); 
     } 


     (function() {    
       script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
       script('https://apis.google.com/js/api:client.js'); 
       script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI'); 
       script('./templates/main/user-theme/javascript/google.js'); 
       script('plugins/getmdlselect/getmdl-select.min.js'); 
       script('./templates/main/user-theme/javascript/facebook.js'); 
       script('./templates/main/user-theme/javascript/newprofile.js'); 
       script('./templates/main/javascript/zipcode.js'); 

       stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css'); 
       stylesheet('https://fonts.googleapis.com/css?family=Roboto'); 
       stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons'); 
       stylesheet('./templates/main/user-theme/tpl-files/material.act.css'); 
       stylesheet('plugins/dropzone/dropzone.css'); 
       stylesheet('plugins/stepper/stepper.min.css'); 
       stylesheet('./templates/main/user-theme/tpl-files/style.css'); 
       stylesheet('./templates/main/style/newprofile.css'); 
       stylesheet('plugins/getmdlselect/getmdl-select.min.css');  



     })(); 
</script> 

Answer 1

Vous pouvez utiliser l'événement load de <script> et élément <link>, constructeur Promise et Promise.all() retourner un résolu Promise une fois que toutes les ressources demandées ont chargé en passant un tableau d'URL pour demander à Array.prototype.map() où chaque tableau d'URL est concaténé en un seul tableau dans lequel chaque fonction est appelée

function stylesheet_(url) { 
     return new Promise(function(resolve, reject) { 
     var s = document.createElement('link'); 
     s.rel = 'stylesheet'; 
     // s.async = false; 
     s.href = url; 
     var x = document.getElementsByTagName('head')[0]; 
     x.appendChild(s); 
     s.onload = resolve; 
     s.onerror = reject; 
     }) 
    } 

    function script(url) { 
     return new Promise(function(resolve, reject) { 
     var s = document.createElement('script'); 
     s.type = 'text/javascript'; 
     s.async = true; 
     s.src = url; 
     var x = document.getElementsByTagName('head')[0]; 
     x.appendChild(s); 
     s.onload = resolve; 
     s.onerror = reject 
     }) 
    } 

    function loadStylesAndScripts(styleList = Array(), scriptList = Array()) { 
     return Promise.all(
     styleList.map(stylesheet_) 
     .concat(scriptList.map(script)) 
    ) 
    } 

    let requests = loadStylesAndScripts(); 
    requests.then(function() { 
     console.log("styles and scripts loaded") 
    }) 
    .catch(function(err) { 
     console.log("an error occurred requesting styles and scripts") 
    })