Vérifier qu'un script est chargé

**aku84** · 16/04/2013, 21h07

Bonjour,

Je fais une application pour le travail qui utilise JavaScript. Je dois charger un certain nombre de variables contenant des données à tracer (c'est-à-dire des arrays qui contiennent les points abscisses et ordonnées).

J'ai vraiment beaucoup de variables et je ne peux pas charger tout d'un coup car ça fait planter le navigateur. Donc j'ai enregistré une variable par fichier (fichiers qui ont le même nom que la variable qu'ils contiennent).

Dans cette application il y a une interface HTML pour sélectionner les courbes que l'on va tracer (et donc les variables que l'on va charger). Ainsi on ne charge que ce dont on a besoin.

Pour ça j'utilise le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
for (var i=0;i<q.toLoad.length;i++) {
	var script=document.createElement("script");
	script.type="text/javascript";
	script.src="./Variables/"+q.toLoad[i];
	document.getElementsByTagName("head")[0].appendChild(script);
}

où la variable q.toLoad contient le nom des fichiers à charger.

Donc une fois que les fichier sont chargés avec cette fonction, on peut tracer les courbes.

Le problème c'est que s'il y a trop de fichiers, ça met trop de temps à charger, et au moment de tracer, toutes les variables ne sont pas chargées.

Pour essayer de résoudre le problème, j'ai fais un setTimeout sur la fonction qui trace, mais ce n'est pas super...
Si par exemple j'ai qu'une courbe à charger, ça va se faire rapidement, donc un setTimeout de 10 secondes serait beaucoup trop.

Donc j'ai essayé de faire une boucle while sur l'existence des variables :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var wait=0;
while (wait<q.toLoad.length) {
	if (typeof(eval(q.toLoad[wait]))!="undefined") {		
		wait++;
	}
}

Mais logiquement ça plante au niveau du eval(q.toLoad[wait]) puisque la variable n'est pas définie.

Est-ce qu'il y aurait un moyen de vérifier qu'un script (ou variable ici) est chargé et attendre que tout soit chargé pour exécuter la suite ?

Merci.

**Lorenzo77** · 16/04/2013, 22h42

salut,

ca devrait te plaire : http://api.jquery.com/jQuery.getScript/
sinon tu peux le faire en ajax sans passer par JQ

**SylvainPV** · 16/04/2013, 22h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
script.onload = function(){
    alert('script chargé et exécuté');
};

Sinon tu peux utiliser une librairie spécialisée dans le chargement asynchrone de scripts, comme labJS, headJS, requireJS...

**aku84** · 16/04/2013, 23h05

Merci pour la réponse, je ne connais pas trop jQuery et ajax mais je regarderai.

Sinon je viens de trouver une solution alternative avec l'évènement DOMNodeInserted.

Je dois mettre ma variable globale et cette fonction en dehors du window.onload() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function OnNodeInserted(event,q) {
   var textNode=event.target;
   if (document.getElementById("log").childNodes.length==q.toLoad.length-1) {
      plot_test(q);
   }
}

Ensuite, il faut écrire en plus à la fin de chacun des fichiers "variables" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var t=document.createElement("p");
t.innerHTML="fichierXXX.js loaded";
t.addEventListener ('DOMNodeInserted',OnNodeInserted(this,Q),false);
document.getElementById("log").appendChild(t);

Où Q est la variable globale (donc ici contient q.toLoad et le nom des variables à charger).

Donc à chaque variable chargée on insère un bloc "p" dans une div "log".

La fonction OnNodeInserted va se déclencher dès qu'on insère un node dans la div "log" (dès qu'une variable est chargée) et on trace les courbes quand le nombre d'enfants de "log" est égal au nombre de fichier qu'on veut charger

Edit : il a fallu enlever complètement le window.onload() en mettant le <script> à la fin et le <body> au début.

**aku84** · 16/04/2013, 23h13

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
script.onload = function(){
    alert('script chargé et exécuté');
};

Par rapport à ça, qu'est-ce qu'il faudrait mettre comme valeur pour script dans script.onload() ?

La fonction qui charge les variables ?

**SylvainPV** · 17/04/2013, 20h15

Ben la même que dans ton premier code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var nbScriptsToLoad = q.toLoad.length;
 
for (var i=0;i<q.toLoad.length;i++) {
	var script=document.createElement("script");
	script.type="text/javascript";
	script.src="./Variables/"+q.toLoad[i];
        script.onload = onScriptLoaded;
	document.getElementsByTagName("head")[0].appendChild(script);
}
 
function onScriptLoaded(){
     nbScriptsToLoad--;
    if(nbScriptsToLoad === 0){
        onAllScriptsLoaded();
    }
}
 
function onAllScriptsLoaded(){
    alert("tous les scripts sont chargés");
}

**Lorenzo77** · 17/04/2013, 20h25

aku84 : il ne serait pas plus simple de stocker tes données au format JSON (ou autre) ?

a verifier : onload ne ce déclenche pas avec Konqueror et les vieilles versions de Safari

**aku84** · 20/04/2013, 23h08

Ben la même que dans ton premier code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var nbScriptsToLoad = q.toLoad.length;
 
for (var i=0;i<q.toLoad.length;i++) {
	var script=document.createElement("script");
	script.type="text/javascript";
	script.src="./Variables/"+q.toLoad[i];
        script.onload = onScriptLoaded;
	document.getElementsByTagName("head")[0].appendChild(script);
}
 
function onScriptLoaded(){
     nbScriptsToLoad--;
    if(nbScriptsToLoad === 0){
        onAllScriptsLoaded();
    }
}
 
function onAllScriptsLoaded(){
    alert("tous les scripts sont chargés");
}

Ah oui cette méthode est plus simple, ça évite d'ajouter des lignes après chaque variable. Merci

@Lorenzo77: je ne connais pas non plus JSON

Vérifier qu'un script est chargé

JavaScript

Discussions similaires

Partager

Partager