Fonction ratioImage (resize d'image propotionnel) incompatible IE9

**bartman44** · 15/10/2012, 14h14

Bonjour,

La fonction ratioImage (ci-dessous) n'est pas compatible avec IE9 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="javascript">
function ratioImage(urlImage,largeurImg){
photo=new Image();
photo.src=urlImage;
var photoWidth=photo.width;
var photoHeight=photo.height;
var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
var newPhotoWidth=photoWidth*ratio;
var newPhotoHeight=photoHeight*ratio;
document.write("<img class=\"image_presentation\"  src=\"" + urlImage + "\" width=\"" + newPhotoWidth + "\"  height=\"" + newPhotoHeight+ "\" />");
};
</script>

A appeler comme ceci :

Code :

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

1
2
3
<script language="javascript">
ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)
</script>

Auriez-vous une solution de remplacement pour cette fonction ?

D'avance merci.

**andry.aime** · 15/10/2012, 17h01

Bonjour,

Code :

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

<script type="text/javascript">

Utilise appendChild à la place de document.write

Code :

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

1
2
3
4
5
6
7
8
9
10
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};

A+.
A+.

**bartman44** · 16/10/2012, 12h19

Bonjour,

J'ai repris la fonction telle que vous l'aviez modifiée :

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>
<script type="text/javascript">
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};
</script>
</head>
<body>
<script type="text/javascript">
ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)
</script>
</body>
</html>

Et cette fois-ci, ça ne fonctionne ni sous IE9 ni sur les autres

**devyan** · 16/10/2012, 14h04

Bonjour,

Code :

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

1
2
<body onload="ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)">
</body>

devyan

**andry.aime** · 16/10/2012, 14h06

C'est que l'image n'est pas encore chargé, donc il ajoute l'image avec une hauteur et largeur de 0 px.

Code html :

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

<body onload="ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100)">

A+.

**Bovino** · 16/10/2012, 14h11

Non, c'est juste que quand tu ouvres un attribut avec le caractère ", le caractère " suivant fermera l'attribut !
La coloration syntaxique montre clairement que tu as une imbrication de quotes problématique !

**bartman44** · 16/10/2012, 17h02

ça fonctionne :

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
<html>
<head>
<script type="text/javascript">
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};
</script>
</head>
<body onload="ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100)">
</body>
</html>

Donne :

Code :

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

<img width="99" height="73" src="http://www.clickonmylinks.fr/wp-content/images/singe1.jpg">

Par contre ce n'est pas tout à fait ce que je recherche parce que je voudrais pouvoir placer mon image n'importe où dans la page...

**andry.aime** · 16/10/2012, 17h12

Envoyé par bartman44

Par contre ce n'est pas tout à fait ce que je recherche parce que je voudrais pouvoir placer mon image n'importe où dans la page...

Il suffit d'ajouter l'image dans un conteneur

Code :

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

1
2
3
4
5
6
7
8
9
10
function ratioImage(urlImage,largeurImg, conteneur){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.getElementById(conteneur).appendChild(photo);
};

Code html :

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

1
2
3
4
5
<body onload="ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'im')">
blablabla
<div id="im"></div>
blablabla
</body>

A+.

**bartman44** · 16/10/2012, 18h19

Etrange car en vidant mon cache, j'ai toujours :

Code :

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

<img width="0" height="0" src="http://www.clickonmylinks.fr/wp-content/images/singe1.jpg">

En rafraichissant, ça passe...

Il doit pas manquer grand chose...

**NoSmoking** · 16/10/2012, 19h40

Bonjour,
il te faut attendre que l'image soit chargée avant de faire une quelconque initialisation

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function ratioImage(urlImage,largeurImg, conteneur){
  photo=new Image();
  photo.src=urlImage;
  photo.onload=function(){
    var photoWidth=photo.width;
    var photoHeight=photo.height;
    var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
    this.width = photoWidth*ratio;
    this.height= photoHeight*ratio;
    document.getElementById(conteneur).appendChild(photo);
  };
}

**bartman44** · 23/10/2012, 18h31

Pas mal la dernière solution mais le coup du conteneur et du onload dans le body c'est pas super propre...
Surtout si je souhaite utiliser plusieurs fois ma fonction dans la page...

**bartman44** · 23/10/2012, 18h32

En gros, rien n'existe de "tout fait" sur une fonction de resize ?

**NoSmoking** · 23/10/2012, 19h32

Envoyé par bartman44

Pas mal la dernière solution mais le coup du conteneur et du onload dans le body c'est pas super propre...
Surtout si je souhaite utiliser plusieurs fois ma fonction dans la page...

pas bien compliqué quand même d'utiliser un addEventListener!

Envoyé par bartman44

En gros, rien n'existe de "tout fait" sur une fonction de resize ?

en regroupant tout ce qui est ci dessus c'est tout comme non?

**bartman44** · 24/10/2012, 10h01

Je ne suis pas du tout développeur et à vrai dire je ne connaissait pas addeventlistener avant aujourd'hui.
Le problème, c'est que j'ai l'impression qu'on a fait que compliquer la 1ere fonction alors que je voulais une simple adaptation pour IE9 car le script de départ fonctionne sur tout le reste des navigateurs.

**NoSmoking** · 24/10/2012, 19h16

Le problème, c'est que j'ai l'impression qu'on a fait que compliquer la 1ere fonction...

Regardes de plus près et tu verras que non, il y a simplement une meilleur prise en compte des aléas des navigateurs et de leur gestion interne.

...alors que je voulais une simple adaptation pour IE9...

c'est chose faite

...car le script de départ fonctionne sur tout le reste des navigateurs.

certes mais c'était insuffisant car maintenant cela marchera même avec FICHROPERIE version 2045.12.78, pas testé les version supérieures

**bartman44** · 25/10/2012, 16h34

OK, ce que je voulais dire c'est surtout que ça va être plutôt difficile à implémenter... mais bon puisque c'est mieux au final on va faire l'effort

Donc je résume :

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
<html>
<head>
<script type="text/javascript">
function ratioImage(urlImage,largeurImg, conteneur){
  photo=new Image();
  photo.src=urlImage;
  photo.onload=function(){
    var photoWidth=photo.width;
    var photoHeight=photo.height;
    var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
    this.width = photoWidth*ratio;
    this.height= photoHeight*ratio;
    document.getElementById(conteneur).appendChild(photo);
  };
}
</script>
</head>
<body>
<script>
window.addEventListener("load",ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plip'),false);
window.addEventListener("load",ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plop'),false);
</script>
blablabla
<div id="plip"></div>
bliblibli
<div id="plop"></div>
</body>
</html>

Par contre je n'ai rien dans ma div "plip"...

**NoSmoking** · 25/10/2012, 18h51

Tout d'abord on va rétablir une bonne pratique en javascript qui consiste à déclarer les variables via le mot clé var, ceci à une importance capitale dans ton cas car comme tu utilises deux fois la fonction ta variable photo, sans var, est globale donc écrasée au deuxième appel.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function ratioImage(urlImage,largeurImg, conteneur){
  var photo=new Image();
  photo.src=urlImage;
  photo.onload=function(){
    var photoWidth=photo.width;
    var photoHeight=photo.height;
    var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
    this.width = photoWidth*ratio;
    this.height= photoHeight*ratio;
    document.getElementById(conteneur).appendChild(photo);
  };
}

La deuxième chose est que tu peux grouper tes fonctions appelées dans une fonction anonyme

Code :

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

1
2
3
4
window.addEventListener("load", function(){
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plip');
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plop');
  }, false);

la troisième chose à également prendre en considération et la compatibilité avec les "anciens navigateurs" qui ne reconnaissent pas addEventListener, mais attachEvent, IE <9.
Dans ce cas tu peux créer une fonction minimale addEvent qui prend en compte les deux méthodes, par exemple

Code :

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

1
2
3
4
5
6
7
8
  function addEvent( obj_, event_, func_, mode_){
    if( obj_.addEventListener){
      obj_.addEventListener( event_, func_, mode_? mode_:false);
    }
    else{
      obj_.attachEvent( 'on'+event_, func_);
    }
  }

de la sorte ton appel ce fait de la façon suivante

Code :

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

1
2
3
4
addEvent( window, "load", function(){
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plip');
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plop');
  }, false);

de la sorte tu restera encore plus compatible.

Au final ton exemple ressemblera à cela

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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addEvent( obj_, event_, func_, mode_){
  if( obj_.addEventListener){
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  }
  else{
    obj_.attachEvent( 'on'+event_, func_);
  }
}
 
function ratioImage(urlImage,largeurImg, conteneur){
  var photo = new Image();
  photo.src = urlImage;
  photo.onload = function(){
    var photoWidth=photo.width;
    var photoHeight=photo.height;
    var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
    this.width = photoWidth*ratio;
    this.height= photoHeight*ratio;
    document.getElementById(conteneur).appendChild(photo);
  };
}
 
addEvent( window, "load", function(){
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plip');
    ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plop');
  }, false);
</script>
</head>
<body>
blablabla
<div id="plip"></div>
bliblibli
<div id="plop"></div>
</body>
</html>

j'ai également ajouté un doctype à l'exemple, un bon réflexe à prendre également.

Enfin il existe aussi l'appel en fin de fichier de tes fonctions

Code html :

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

1
2
3
4
5
6
7
8
9
10
<body>
  blablabla
  <div id="plip"></div>
  bliblibli
  <div id="plop"></div>
<script type="text/javascript">
ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plip');
ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100,'plop');
</script>
</body>

au quel cas tu te passes de addEvent et consort.

**bartman44** · 29/10/2012, 16h15

Merci beaucoup pour ce dernier retour qui fonctionne parfaitement !

Fonction ratioImage (resize d'image propotionnel) incompatible IE9

JavaScript

Discussions similaires

Partager

Partager