Exécuter un script JS avant toute autre chose

Version imprimable

12/02/2010, 11h42
thepopol777

Exécuter un script JS avant toute autre chose

Bonjour.

Dans le cadre de la création d'un site internet, j'utilise un scipt JS qui détermine quel est la taille de l'ecran de l'utilisateur, et ainsi, choisis la bonne taille de background du body en fonction. Le problème, très curieux d'ailleurs, c'est que sur ma page j'ai un SWF assez gros, et tant que le SWF n'est pas totalement chargé, le script JS ne s'exécute pas et je me retrouve avec un background tout blanc en attendant que le SWF soit chargé.

Comment puis-je faire pour que le script JS s'exécute AVANT le chargement du SWF afin d'avoir au moins un background agréable pendant l'attente?

Merci pour vos suggestions.
12/02/2010, 11h52
E.Bzz

Bonjour et bienvenu sur Developpez.com ;)

tu peux n'ajouter ton SWF (via le DOM) qu'après le chargement du reste de la page et l'exécution de ton script actuel.

Code:

<body onload="ScriptActuel();AjouteSWF();">

A+

merci

Salut!
Alors d'abord merci pour ton accueil, et merci de ta réponse rapide c'est gentil.
Ensuite, je m'excuse mais je suis un gros novice alors pour être sur de faire correctement, voici ma page html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<head>
<title>TITRE</title>
<link href="css/intro.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
 
<script type="text/javascript" src="js/background.js"></script> <!-- le code qui choisit mon background -->
 
 
</head>
 
 
<body>
<div id="conteneur">
	<div id="intro">
 
 
 
		<div id="flashcontent"></div> <!-- le SWF en question -->
 
 
<script type="text/javascript">
	var randomnumber=Math.floor(Math.random()*10000);
   var so = new SWFObject("intro.swf?"+randomnumber, "mymovie", "600", "500", "8", "#ffffff");
   so.addParam('wmode', 'transparent','false');
   so.write("flashcontent");
</script>
 
 
	</div>	
</div>	
 
</body>			
</html>

Comment puis-je adapter ta ligne de code à ceci? :oops:

Merci encore

12/02/2010, 12h15
E.Bzz

Citation:

Envoyé par thepopol777

je suis un gros novice alors pour être sur de faire correctement,

Pas nécessaire de faire correctement du 1° coup.
Pour progresser mieux vaut essayer.

Citation:

Envoyé par Lao-Tseu

L'échec est le fondement de la réussite

;)

Si je le fais à ta place (en admettant que j'ai tous les éléments, ce qui n'est pas le cas pour l'instant), tu resteras "novice" :mrgreen:

Bref, essaye, montre-nous le résultat et on regardera où ça bloque ...

EDIT : pour l'instant tu n'as pas de "ScriptActuel();" puisque celui-ci est appelé directement dans la page (ton SWF). Par contre, tu dois pouvoir en faire une fonction et l'appeler avec cette méthode.

A+

alors....

Ok dans ce cas, n'ayaons pas peur du ridicule :mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<head>
<title>TITRE</title>
<link href="css/intro.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
 
<script type="text/javascript"> 
 
 var background = function ()
{
    var res = [ 
            {width:800,  height:600, src:"images/800600.jpg"},
            {width:1024, height:768, src:"images/1024768.jpg"},
            {width:1280, height:800, src:"images/1280800.jpg"},
			{width:1920, height:1200, src:"images/19201200.jpg"}];
 
 
    var img = res[0],
    width = screen.width || (document.body && document.body.clientWidth) || 1920; 
 
 
    for (var i=0; i < res.length;i++) {
        if (img.width <= res[i].width && res[i].width <= width) { 
            img = res[i];
        }
        else {
 
            break;
        }
    }
 
    if (document.body) {
        document.body.style.backgroundImage = "url('"+ img.src +"')";
    }
}
</script>
 
<script type="text/javascript"> 
 
 var loadswf = function ()
{
    	var randomnumber=Math.floor(Math.random()*10000);
   var so = new SWFObject("intro.swf?"+randomnumber, "mymovie", "600", "500", "8", "#ffffff");
   so.addParam('wmode', 'transparent','false');
   so.write("flashcontent");
 
}
</script>
 
</head>
 
 
<body onload="background();loadswf();">
 
<div id="conteneur">
	<div id="intro">
 
 
 
		<div id="flashcontent"></div> <!-- le SWF en question -->
 
 
	</div>	
</div>	
 
</body>			
</html>

J'ai directement inclus le background.js pour que tu le voies.
Je brûle? :oops:

Je voudrais aussi comprendre comment cela fonctionne exactement, est-ce que ce que je mets dans "body onload" se charge a la queue-leu-leu? Genre d'abord le script puis le swf?

Merci de ton aide

Code:

1
2
3
4
5
6
 
    var res = [ 
            {width:800,  height:600, src:"images/800600.jpg"},
            {width:1024, height:768, src:"images/1024768.jpg"},
            {width:1280, height:800, src:"images/1280800.jpg"},
			{width:1920, height:1200, src:"images/19201200.jpg"}];

et si ma resolution d'écran ne correspond pas à ce que tu as mis, je fais comment ?

12/02/2010, 13h34
E.Bzz

Citation:

Envoyé par thepopol777

Je brûle?

A toi de dire : ça donne quoi ?
Une erreur ?
Quelle ligne, quel message ?

Citation:

Envoyé par thepopol777

Je voudrais aussi comprendre comment cela fonctionne exactement, est-ce que ce que je mets dans "body onload" se charge a la queue-leu-leu? Genre d'abord le script puis le swf?

Oui, c'est ça. D'où ma proposition ;)

EDIT : par rapport à la remarque de Gatsu, tu devrais prévoir un background pour le cas "else" :mrgreen:

A+
12/02/2010, 13h56
thepopol777

merci de vos réponses. Bon pour le background il n'en est pas vraiment question mais pour y répondre, je dirais que le script est censé prendre la taille la plus proche de l'utilisateur, donc meme si ce n'est pas le background exact,c'est censé en mettre un tout de même.

En suite, je pensais en fait que la ligne

Code:

width = screen.width || (document.body && document.body.clientWidth) || 1920;

donnait le 1920 par defaut ( genre else ). Mais encore une fois je suis ultra novice donc ce n'est peut etre pas ça, sinon vous n auriez pas posé la question :mrgreen:

Pour en revenir au probleme, j'ai une connexion SUPER instable ( genre 56k qui coupe toute les minutes et je dois attendre 30min, donc pour le test c'est vraiment difficile. J'ai testé malgré tout, ça avait l'air de fonctionner (bg avant le swf ), mais j'ai recommencé 30 min après et ça ne fonctionnait plus ( bg blanc... ). Et de là a dire Où ça foire, vous m'en demandez trop, car si je le savais, je serais pas ici :lol:

Merci encore du temps que vous m'accordez
12/02/2010, 13h59
E.Bzz

Citation:

Envoyé par thepopol777

Et de là a dire Où ça foire, vous m'en demandez trop

Demande à ton nav : il suffit d'activer la "notification des erreurs de scripts" (au expression équivalente) dans les options.
Tu devrais avoir le texte du message d'erreur ainsi qu'un n° de ligne.
Ça aiderait ;)

A+
12/02/2010, 14h09
thepopol777

J'ai coché "afficher une notification a chaque erreur de script" sous IE... Mais ça ne dit rien lorsque j'ouvre ma page :(???
12/02/2010, 14h29
E.Bzz

Tu n'as pas un petit triangle jaune dans la barre des tâches, en bas à gauche ?

A+
12/02/2010, 15h14
thepopol777

non, il n'y a aucun triangle jaune :? Est-ce que tu as décelé une erreur dans mon code par hasard?
12/02/2010, 15h25
E.Bzz

Citation:

Envoyé par thepopol777

Est-ce que tu as décelé une erreur dans mon code par hasard?

Non, c'était pour avoir une piste :aie:

Mais celle (la piste) qui reste c'est ta connexion : si une fois sur 2 tu es déco pendant le chargement de la page, ça aide pas le code à fonctionner :mrgreen:

A+
12/02/2010, 15h27
thepopol777

oui c'est sur, j'ai bougé je ne suis plus au bureau. là j'ai une connexion pourrie mais stable au moins. Et justement avec la lenteuyr je vois mieux ce qui se charge en premier ou pas, et là je peux dire que le swf se charge toujours en premier.
12/02/2010, 15h31
E.Bzz

Citation:

Envoyé par thepopol777

le swf se charge toujours en premier.

:?

Pour en être sûr :
termine background() par un "return true;".

Puis modifie le onload :

Code:

<body onload="if (background()) loadswf();">

Là au moins, il n'y aura pas d'ambiguïté : pas possible de lancer le 2° avant la fin du 1° ;)

A+

Donc on est bien d'accord, ça donne ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<head>
<title>TITRE</title>
<link href="css/intro.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
 
<script type="text/javascript"> 
 
 var background = function ()
{
    var res = [ 
            {width:800,  height:600, src:"images/800600.jpg"},
            {width:1024, height:768, src:"images/1024768.jpg"},
            {width:1280, height:800, src:"images/1280800.jpg"},
			{width:1920, height:1200, src:"images/19201200.jpg"}];
 
 
    var img = res[0],
    width = screen.width || (document.body && document.body.clientWidth) || 1920; 
 
 
    for (var i=0; i < res.length;i++) {
        if (img.width <= res[i].width && res[i].width <= width) { 
            img = res[i];
        }
        else {
 
            break;
        }
    }
 
    if (document.body) {
        document.body.style.backgroundImage = "url('"+ img.src +"')";
    }
	return true;
}
</script>
 
<script type="text/javascript"> 
 
 var loadswf = function ()
{
    	var randomnumber=Math.floor(Math.random()*10000);
   var so = new SWFObject("intro.swf?"+randomnumber, "mymovie", "600", "500", "8", "#ffffff");
   so.addParam('wmode', 'transparent','false');
   so.write("flashcontent");
 
}
</script>
 
</head>
 
 
<body onload="if (background()) loadswf();">
 
<div id="conteneur">
	<div id="intro">
 
 
 
		<div id="flashcontent"></div> <!-- le SWF en question -->
 
 
	</div>	
</div>	
 
</body>			
</html>

Ça a l'air de bien fonctionner merci :ccool:
Peux-tu m'expliquer le "return true;" s'il te plaît?
Et aussi je voudrais savoir si avec ce body onload ( que j'ai vraiment découvert grace a toi aujourd'hui ) on peut mettre tout? Par exemple, peut on dire de charger les fonts ( j'ai des @font-face dans mon css ) avant d'afficher le body?

Merci encore je suis sauvé, me reste plus que mon probleme de preload de swf ;)

12/02/2010, 16h23
E.Bzz

Citation:

Envoyé par thepopol777

Peux-tu m'expliquer le "return true;"

Puisque la fonction est maintenant utilisée dans un test (if), il faut qu'elle retourne un booléen (pour être propre, bien que dans l'absolu il suffit qu'elle retourne quelque chose différent de 0 ou false).
Bien qu'il y ait peu de chance que ça serve ici, ça pourrait te permettre d'annuler l'exécution de loadswf() en fonction du résultat de background().
Disons, par exemple si la résolution de l'écran de l'utilisateur n'était pas prévue dans ta liste ;)

Citation:

Envoyé par thepopol777

Et aussi je voudrais savoir si avec ce body onload ( que j'ai vraiment découvert grace a toi aujourd'hui ) on peut mettre tout?

Le onload (comme tous les autres évènement prévus en Javascript) ne permet que de lancer un code Javascript.
Dans le onload tu peux donc faire à peu près tout ce que permet Javascript.

A+
13/02/2010, 15h37
thepopol777

Ok merci de ta réponse, une dernière chose, avec cette méthode de body onload, si je comprend bien cela fait " une fois que tout le document est chargé ( donc le head+body ), charge les fonctions:....; ..."

Mais il y a-til un moyen de faire " avant de charger le body, charge ces scripts " ?

:P
15/02/2010, 14h31
E.Bzz

Citation:

Envoyé par thepopol777

Mais il y a-til un moyen de faire " avant de charger le body, charge ces scripts " ?

:koi:

Pas sûr d'avoir compris la question ...

Le nav charge d'abord la partie <head> (dont les scripts en include ou directement présents dans la page, les css etc) ainsi que le body.
Une fois que tout ça est fait, le onload se déclenche ...

Je ne vois pas l'intérêt de forcer explicitement le chargement de scripts avant le body :?
Encore moins de la exécuter, ces scripts ayant dans la majorité des cas des références au contenu du body.

EDIT : par contre (des fois que ça soit ta question), il y a moyen, par script, d'appeler une fonction (onload) avant de faire afficher le contenu de la page. Il suffit d'avoir, par défaut, masquer le contenu, puis de la faire afficher en tout fin de la fonction appelé sur onload ...

A+
17/02/2010, 16h48
thepopol777

Oui merci je m'étais mal exprimé. Merci encore