2010-11-08 10 views
3

Je charge dynamiquement des scripts et des feuilles de style à partir de javascript comme this.Comment faire pour que le navigateur attende le chargement des assets?

Le problème est que le navigateur n'attend pas le chargement du script.

considérer que j'ai une fonction nommée functionToBeCalled() dans un fichier script nommé script file.js

j'ai une fonction de charger le fichier de script.

<script type="text/javascript"> 
    var listOfJavaScriptsLoaded = new Array(); 

    function LoadScriptFile(scriptUrl){ 
     var isScriptLoaded = false; 
     var i = 0; 
     for(i = 0; i < listOfJavaScriptsLoaded.length; i ++){ 
     if(listOfJavaScriptsLoaded[i] == scriptUrl){ 
      isScriptLoaded = true; 
      break; 
     } 
     } 
    if(isScriptLoaded == false){   
    var headTag= document.getElementsByTagName('head')[0];  
    var scriptTag= document.createElement('script'); 
    scriptTag.type= 'text/javascript'; 
    scriptTag.src= scriptUrl; 
    headTag.appendChild(scriptTag); 
    listOfJavaScriptsLoaded.push(scriptUrl); 
    } 
    } 
    LoadScriptFile("script-file.js"); 
    functionToBeCalled(); 
</script> 

maintenant, ce qui se passe est que le navigateur n'attend pas la balise script pour charger et va à la commande suivante. Je reçois une erreur "undefined functionToBeCalled()". c'est naturel. Mais le fait est que quand j'inspecte dans firebug, la balise de script a été formée et le fichier a été chargé.

Comment puis-je faire en sorte que le navigateur mette en pause le chargement et la reprise après le chargement de l'actif?

Edit1: Ce problème se produit uniquement lorsque je suis chargement de la page en ajax et non en page se charge normale

Edit2: Ou est-il possible de lire un fichier script/css de javascript et écrire il directement dans le balisage dans les balises de script

Si j'utilise window.stop() le chargement s'arrête complètement. comment puis-je le faire reprendre de la même ligne?

Ou est-il possible de faire en sorte que le navigateur considère que le chargement est toujours en cours et le réinitialise dans l'événement onload?

+1

Pourquoi les charger de cette façon en premier lieu?Est-ce absolument pas une option pour les mettre directement dans l'étiquette de tête, ou écrire des étiquettes '

3

Vous avez sans doute des raisons spécifiques pour charger le script dynamique, mais de présenter l'option, si vous écrivez l'élément de script dans votre sortie HTML comme si :

<script src="script-file.js"></script> 
<script>functionToBeCalled();</script> 

Le navigateur interrompt l'analyse jusqu'à ce que ce script ait été chargé et interprété.

Ceci est également valide in the BODY.

2

Consultez LABjs (http://labjs.com/) par Getify Solutions. LABjs permet de charger simultanément des scripts insérés dans un script mais de les exécuter dans l'ordre.

+0

cela n'échoue-t-il pas avec jQuery? – ZX12R

+0

Selon la documentation de labjs, il y a quelque chose d'une incompatibiity avec jQuery 1.3 mais pas avec 1.4 – Alohci

+0

ressemble à une très bonne option, sauf le fait que la plupart des plugins que j'utilise n'ont pas encore commencé le support pour 1.4 .. :( – ZX12R

0

Je recommanderais de regarder Cuzillion. Il vous permettra d'expérimenter en appelant et de beaucoup de manières différentes pour voir comment ils réagissent dans le navigateur.

Cela devrait répondre à votre question. Il suffit de l'exécuter avant que votre page ne soit chargée body.

<script type="text/javascript"> 
    var loadScriptFile = (function(){ 
     var listOfJavaScriptsLoaded = []; 

     return function(scriptUrl){ 
      var isScriptLoaded = false; 
      for(var i = 0; i < listOfJavaScriptsLoaded.length; i ++){ 
       if(listOfJavaScriptsLoaded[i] == scriptUrl){ 
        isScriptLoaded = true; 
        break; 
       } 
      } 
      if(!isScriptLoaded){ 
       document.write('<scr' + 'ipt type="text/javascript" src="' + scriptUrl + '"></scr' + 'ipt>'); 
      } 
     }; 
    }()); 
    loadScriptFile("script-file.js"); 
    functionToBeCalled(); 
</script> 
+0

mon problème est quand je charge la page par ajax ... ça marche bien sinon ... – ZX12R