Utiliser setTimeout avec Display block ou none

**BRUNO71** · 28/01/2015, 15h10

Bonjour,

Besoin d’un petit coup de pouce, car je bloque sur ce script avec setTimeout.
Surement déjà expliqué….
L’objectif principal étant d’afficher une image au démarrage de ma page et que celle-ci disparaisse quelques secondes plus tard.
Je pensais trouver la solution avec display en le modifiant par none ou block.

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
 
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
function delai_img() {
 
document.getElementById("img_accueil").style.display = "block";
 
setTimeout(function delai_img() 
document.getElementById("img_accueil").style.display = "none"; , 5000);
}
</script>
</head>
<body>
 <img id="img_accueil" alt="" src="img.gif" style="border: 2px #0D96DA dotted;width:100px;height:50px; "/>
 
</body>
</html>

J'ai essayé avec Load dans body, mais sans résultat.

Cordialement,
Merci,

Bruno

**yahiko** · 28/01/2015, 15h20

Avant toute chose, si tu utilises la méthode getElementById, tu dois t'assurer que ta page est bien chargée avant d'exécuter ton code.

Donc, place ton script JS à la du HTML, ou mieux, inclut l'appel de ta fonction principale dans un window.onload.

EDIT: d'autant plus que je remarque que tu n'appelles nulle part la fonction que tu as défini, ce qui risque de poser un souci.

**tepaze** · 28/01/2015, 15h29

De plus, tu defini ta fonction plusieurs fois...
Je pense que ceci (non testé) peu te servir de piste :

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
<html>
<head>
<title></title>
</head>
<body>
	<img id="img_accueil" alt="" src="img.gif" style="display:block; border: 2px #0D96DA dotted;width:100px;height:50px; "/>
 
 
 
	<script type="text/javascript">
	function delai_img() { 
		setTimeout(function(){
			document.getElementById("img_accueil").style.display = "none";}
		, 5000);
	}
	delai_img();
	</script>
</body>
</html>

Peut être devra tu utiliser :

Code :

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

document.getElementById("img_accueil").setAttribute("style", "display:none");

**Bovino** · 28/01/2015, 15h37

Code :

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

1
2
3
4
5
6
function delai_img() { 
	setTimeout(function(){
		document.getElementById("img_accueil").style.display = "none";}
	, 5000);
}
delai_img();

Dans ce cas, l'utilisation d'une fonction me semble quelque peu superfétatoire...

Code :

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

1
2
3
setTimeout(function(){
	document.getElementById("img_accueil").style.display = "none";}
, 5000);

revient au même.

**tepaze** · 28/01/2015, 15h43

Oui... C'est juste pour laisser l'opprtunité de lancer le setTimeout à convenance...

**Bovino** · 28/01/2015, 15h48

T'en fais pas, moi c'était juste pour placer "superfétatoire" dans une discussion du forum !

**yahiko** · 28/01/2015, 15h50

Ce qui est indubitablement superfétatoire

(indubitablement placé !)

**tepaze** · 28/01/2015, 16h36

Envoyé par Bovino

T'en fais pas, moi c'était juste pour placer "superfétatoire" dans une discussion du forum !

Bravo, défi relevé :-)

Utiliser setTimeout avec Display block ou none

JavaScript

Vue hybride

Discussions similaires

Partager

Partager