Exécuter un script JS avant toute autre chose

**thepopol777** · 12/02/2010, 11h42

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.

**E.Bzz** · 12/02/2010, 11h52

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 :

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

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

A+

**thepopol777** · 12/02/2010, 12h09

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 :

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
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?

Merci encore

**E.Bzz** · 12/02/2010, 12h15

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.

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"

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+

**thepopol777** · 12/02/2010, 13h07

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

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
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?

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

**Gatsu35** · 12/02/2010, 13h29

Code :

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

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 ?

**E.Bzz** · 12/02/2010, 13h34

Envoyé par thepopol777

Je brûle?

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

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"

A+

**thepopol777** · 12/02/2010, 13h56

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 :

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

  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

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

Merci encore du temps que vous m'accordez

**E.Bzz** · 12/02/2010, 13h59

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+

**thepopol777** · 12/02/2010, 14h09

J'ai coché "afficher une notification a chaque erreur de script" sous IE... Mais ça ne dit rien lorsque j'ouvre ma page

???

**E.Bzz** · 12/02/2010, 14h29

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

A+

**thepopol777** · 12/02/2010, 15h14

non, il n'y a aucun triangle jaune

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

**E.Bzz** · 12/02/2010, 15h25

Envoyé par thepopol777

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

Non, c'était pour avoir une piste

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

A+

**thepopol777** · 12/02/2010, 15h27

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.

**E.Bzz** · 12/02/2010, 15h31

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 :

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

<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+

**thepopol777** · 12/02/2010, 16h11

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

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

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

**E.Bzz** · 12/02/2010, 16h23

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

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+

**thepopol777** · 13/02/2010, 15h37

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 " ?

**E.Bzz** · 15/02/2010, 14h31

Envoyé par thepopol777

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

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+

**thepopol777** · 17/02/2010, 16h48

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

Exécuter un script JS avant toute autre chose

JavaScript

Discussions similaires

Partager

Partager