Fonction ratioImage (resize d'image propotionnel) incompatible IE9

Version imprimable

Bonjour,

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

Code:

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:

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.

Bonjour,

Citation:

<script language="javascript">

Code:

<script type="text/javascript">

Utilise appendChild à la place de document.write
Code:

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

Bonjour,

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

Code:

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

Bonjour,

Code:

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

devyan

16/10/2012, 14h06
andry.aime

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

Code:

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

A+.
16/10/2012, 14h11
Bovino

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 !

ça fonctionne :
Code:

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:

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

Citation:

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:

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:

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

16/10/2012, 18h19
bartman44

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

Code:

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

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

Code:

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);
  };
}

23/10/2012, 18h31
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...
23/10/2012, 18h32
bartman44

En gros, rien n'existe de "tout fait" sur une fonction de resize ?
23/10/2012, 19h32
NoSmoking

Citation:

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!

Citation:

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?
24/10/2012, 10h01
bartman44

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.
24/10/2012, 19h16
NoSmoking

Citation:

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.

Citation:

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

c'est chose faite

Citation:

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

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:

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

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:

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:

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:

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:

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:

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:

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.

29/10/2012, 16h15
bartman44

Merci beaucoup pour ce dernier retour qui fonctionne parfaitement !