Vérifier qu'un script est chargé

Version imprimable

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:

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:

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.

16/04/2013, 22h42
Lorenzo77

salut,

ca devrait te plaire : http://api.jquery.com/jQuery.getScript/
sinon tu peux le faire en ajax sans passer par JQ
16/04/2013, 22h56
SylvainPV
Code:

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...
16/04/2013, 23h05
aku84
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:

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:

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.
16/04/2013, 23h13
aku84
Code:

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 ?

Ben la même que dans ton premier code

Code:

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

17/04/2013, 20h25
Lorenzo77

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

Citation:

Ben la même que dans ton premier code

Code:

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 :(