Utilisation de removeChild
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:
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:
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> |
