Utilisation de removeChild

**jpe54** · 14/06/2013, 08h15

Bonjour,

Je redimensionne une image puis l'affiche dans un div par appendChild en utilisant un id.

Le problème est que si la page est actualisée par F5 ou si je reviens sur cette page l'image ne s'affiche plus... pourtant la fonction removeChild semble fonctionner ... et l'activer avec <body unload="DeleteChild()" ne change rien.

Merci de vos propositions...

Code removeChild peut être déficient ou problème d'Events ?:

Code :

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

1
2
3
4
5
6
7
8
function DeleteChild() {
var d = document.getElementsByTagName("div");
	for (var i = d.length - 1; i >= 0; i--)
	{
        d[i].parentNode.removeChild(d[i]);
	}
d = null;
}

Code source complet (sans les images jpg)

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- saved from url=(0013)about:internet -->
<html>
<head>
 
<style>
	body {
		height:100%;
		display:table;
		width:100%;
		background-color: #A9A9A9; 
	}
 
	div {
		margin:0 auto;
	}
 
 	 img {
		margin-left: auto;
		margin-right: auto;
		display: block;
		border: 2px solid #bbb;
		padding: 20px;
		box-shadow: 0 0 0 16px #fff inset, 
		5px 5px 5px #888;
		}
 
 
	</style>
 
 
<script type="text/javascript">
 
function resizeImg(urlImage, EcranW, EcranH, MyId){
  var photo = new Image();
  photo.src = urlImage;
 
	photo.onload = function() {
	// Taille originelle de la photo
	var imgW = photo.width;
	var imgH = photo.height;
 
	ratioH = EcranH / imgH;
	ratioW = EcranW / imgW;
 
		if (ratioH < ratioW || imgH == imgW) {
			imgH = Math.floor(imgH * ratioH) ;
			imgW = Math.floor(imgW * ratioH);
		} else {
			imgH = Math.floor(imgH * ratioW);
			imgW = Math.floor(imgW * ratioW);
		}
	// Nouvelle Taille proportionnelle en fonction taille écran
	photo.width = imgW;
	photo.height= imgH;
 
	// Générer image dans le div choisi
	document.getElementById(MyId).appendChild(photo);
	}
}
 
function DeleteChild() {
var d = document.getElementsByTagName("div");
	for (var i = d.length - 1; i >= 0; i--)
	{
        d[i].parentNode.removeChild(d[i]);
	}
d = null;
}
 
resizeImg('HD_H.jpg',900, 600,'ImageH');
resizeImg('HD_V.jpg',900, 600,'ImageV');
 
</script>
</head>
<body>
 
<p><a href="javascript:DeleteChild()">Deleter Child</a></p>
 
<p>Image Horizontale fonction de la taille écran </p>
<div id="ImageH"></div>
 
<p>Image Verticale fonction de la taille écran</p>
<div id="ImageV"></div>
</body>
</html>

**rollbich** · 14/06/2013, 09h23

bonjour,

J'ai testé ta page en local. Aucun problème, même après avoir rechargé la page ou tapé F5 !!

**jpe54** · 14/06/2013, 10h51

Effectivement F5 fonctionne avec la dernière version de Firefox...

Toutefois si je clique sur deleteChild puis sur afficher Child1 ou 2 cela ne marche plus... en ajoutant ces liens dans le body qui semble mettre en évidence le problème...

Cordialement,

Code html :

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

1
2
3
<p><a href="javascript:DeleteChild()">Deleter Child</a>
<a href="javascript:resizeImg('HD_H.jpg',900, 600,'ImageH')">Afficher Child 1</a>
<a href="javascript:resizeImg('HD_V.jpg',900, 600,'ImageH')">Afficher Child 2</a></p>

**Barsy** · 14/06/2013, 11h05

Pour le problème de réactualisation qui se produit sous IE (pas sous Firefox), cela pourrait provenir du "photo.onload".
Apparemment, un bug dans IE fait que le onload ne se réexécute pas au rechargement d'une page. Cela est du à une mise en cache du contenu de l'image donc celle-ci de se recharge pas lorsque l'on fait F5 (et même en faisant CTRL+F5).

Une solution est donc de régénérer à chaque fois une URL différente pour l'image. Par exemple en faisant

Code :

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

photo.src = urlImage + "?" + new Date().getTime();

**Barsy** · 14/06/2013, 11h08

Et pour ce qui est des liens "Afficher Child" qui ne marchent pas, c'est normal. Dans ton deleteChild, tu supprimes les "div". C'est donc impossible ensuite d'y remettre une image puisque le div n'existe plus.

Essaie plutôt :

Code :

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

1
2
3
4
5
6
7
8
function DeleteChild() {
	var d = document.getElementsByTagName("div");
	for (var i = d.length - 1; i >= 0; i--)
	{
        d[i].innerHTML = "";
	}
	d = null;
}

**jpe54** · 14/06/2013, 12h17

1000 mercis pour vos remarques et explications limpides!
Surtout "Respect" pour votre identification du dysfonctionnement sous IE et cette solution hyper simple pour le contourner sans gène pour d’autres navigateurs.
Savoir c'est pouvoir et cette information et son efficace solution mérite de figurer dans une des FAQ de ce site !
Encore une fois 1000 Mercis pour ce coup de main et vos qualités de pédagogue !
Bien Cordialement,

Utilisation de removeChild

JavaScript

Discussions similaires

Partager

Partager