Problème de redimensionnement image en javascript

Problème de redimensionnement image en javascript - HTML/CSS - Programmation

Marsh Posté le 10-12-2009 à 21:02:46    

Bonjour,
 
Je suis assez debutant en javascript, mais malgré cela je me suis bien documenté sur les causes de mon problème et je ne vois pas d'où ça vient.
Je cherche à redimensionner une image à la volée.
Pour cela j'utilise ce script:

Code :
  1. document.getElementById('suivante').onclick = function suivante() {
  2.    numero += 1;
  3.    if (numero == lien_image.length + 1) numero = 1;
  4.    document.getElementById("image_prod" ).setAttribute("style", "visibility:hidden;" ); //cache image actuellement affichee
  5.    document.getElementById("image_prod" ).setAttribute("width", "" ); //redonne la largeur d'origine
  6.    document.getElementById("image_prod" ).setAttribute("height", "" ); // redonne la hauteur d'origine
  7.    document.getElementById("image_prod" ).setAttribute("src", lien_image[numero]); //remplace l'image actuelle par la suivante    
  8.    redim_image(lien_image[numero]); //fonction de redimensionnement de l'image
  9.    document.getElementById("image_prod" ).setAttribute("style", "" ); //affiche la nouvelle image redimensionnée
  10.    document.getElementById("numero" ).value = numero;
  11.   }


 
La fonction redim_image:

Code :
  1. function redim_image(url){
  2. var image = new Image();
  3. image.src = url;
  4. var h = image.height;
  5. var w = image.width;
  6. var dW = 0;
  7. var dH = 0;
  9. document.getElementById("lien_image_prod" ).value = url;
  12. // Si la largeur ou la hauteur depasse la taille maximale
  13. if ((h >= 110) || (w >= 230)) {
  14. // Si la largeur et la hauteur depasse la taille maximale
  15.     if ((h >= 110) && (w >= 230)) {
  16.         dH = 110;
  17.         // On recalcule la taille proportionnellement
  18.         dW = parseInt((w * dH) / h, 10);
  19.  document.getElementById("image_prod" ).setAttribute("width", dW);
  20.     }
  21.     else if ((h > 150) && (w < 230)) {
  22.       // Si la hauteur depasse la taille maximale
  23.       dH = 110;
  24.         // On recalcule la taille proportionnellement
  25.       dW = parseInt((w * dH) / h, 10);
  26.   document.getElementById("image_prod" ).setAttribute("width", dW);
  27.     }
  28. else if ((h < 110) && (w > 230)) {
  29.       // Si la largeur depasse la taille maximale
  30.       dW = 230;
  31.         // On recalcule la taille proportionnellement
  32.       dH = parseInt((h * dW) / w, 10);
  33.   document.getElementById("image_prod" ).setAttribute("height", dH);
  34. }
  35. }


 
Il s'agit d'une visionneuse d'image et, je sais, mon code est assez "bourrin", mais je débute, je le repete  :o .
 
Mon problème c'est que parfois ma fonction redim_image voit comme comme valeur de hauteur et de largeur 0.
Du coup elle ne redimensionne pas et donc l'image non redimensionnée apparait (forcement... :o ).
 
Aucune idée d'où ça peut venir car lorsque j'execute en pas à pas avec firebug tout se passe bien.
C'est comme si javascript executait des instructions avant que ma fonction redim_image soit terminée...
 
Toute aide serait bienvenue  :hello: .

Reply

Marsh Posté le 10-12-2009 à 21:02:46   

Reply

Marsh Posté le 15-12-2009 à 21:18:21    

Up?  :hello:

Reply

Marsh Posté le 15-12-2009 à 21:51:26    

Mouais, problème assez classique. Au moment où tu assignes l'attribut src à ton "new Image()", le chargement de l'image sera fait de manière asynchrone. Si ça prends trop de temps (genre latence réseau, image de grande taille), il y a des chances que lorsque tu essaieras de récupérer sa taille, l'image ne soit pas encore chargée.
 
Edit: quelques petits trucs bon à savoir quand on débute :

  • obj.setAttribute("abc", val) revient à la même chose que "obj.abc = val"
  • Pour arrondi à l'entier par défaut on peut utiliser l'opérateur | (ou binaire) avec l'opérande 0. parseInt c'est pour une chaine de caractère.


Pour éviter ça utilise l'événement "onload" sur ton image du style (à l'arrache, sans tester) :

Code :
  1. function redim_image(url) {
  2.     var image = new Image()
  3.     image.src = url
  4.     document.getElementById("lien_image_prod" ).value = url
  5.     image.onload = function() {
  6.         var h = this.height
  7.         var w = this.width
  8.         var dW = 0
  9.         var dH = 0
  10.  
  11.         // Si la largeur ou la hauteur depasse la taille maximale
  12.         if (h >= 110 || w >= 230)
  13.         {
  14.             // Si la largeur et la hauteur depasse la taille maximale
  15.             if ((h >= 110) && (w >= 230))
  16.             {
  17.                 dH = 110
  18.                 // On recalcule la taille proportionnellement
  19.                 dW = (w * dH) / h | 0
  20.                 document.getElementById("image_prod" ).width = dW
  21.             }
  22.             else if (h > 150 && w < 230)
  23.             {
  24.                 // Si la hauteur depasse la taille maximale
  25.                 dH = 110
  26.                 // On recalcule la taille proportionnellement
  27.                 dW = (w * dH) / h | 0
  28.                 document.getElementById("image_prod" ).width = dW
  29.             }
  30.             else if ((h < 110) && (w > 230))
  31.             {
  32.                 // Si la largeur depasse la taille maximale
  33.                 dW = 230
  34.                 // On recalcule la taille proportionnellement
  35.                 dH = (h * dW) / w | 0
  36.                 document.getElementById("image_prod" ).height = dH
  37.             }
  38.         }
  39.     }
  40. }


Message édité par tpierron le 15-12-2009 à 21:56:03
Reply

Marsh Posté le 17-12-2009 à 21:37:59    

Merci de ton aide!
 
Effectivement avec l'élément onload ça fonctionne beaucoup mieux.
 
J'ai bien pris note de tes conseils!

Reply

Marsh Posté le 01-02-2010 à 22:16:37    

J'up le topic malgré que le script ci-dessus fonctionne.
Parfois quand je fais défiler mes images certaines prennent la taille de l'image précédente ce qui fait qu'elles sont allongées ou écrasées...
Parfois aussi malgré la présence de l'élement onload, je vois furtivement l'image à sa taille d'origine...
J4ai bien investigué, mais je soupçonne toujours un problème lors du chargement.

Message cité 1 fois
Reply

Marsh Posté le 01-02-2010 à 23:20:12    

garath_ a écrit :

J'up le topic malgré que le script ci-dessus fonctionne.
Parfois quand je fais défiler mes images certaines prennent la taille de l'image précédente ce qui fait qu'elles sont allongées ou écrasées...
Parfois aussi malgré la présence de l'élement onload, je vois furtivement l'image à sa taille d'origine...
J4ai bien investigué, mais je soupçonne toujours un problème lors du chargement.


Ok, si j'ai bien compris, tu as une liste de vignette, où en cliquant dessus, ça va mettre à jour une image #image_prod, que tu redimensionnes après avoir affecté l'attribut src.
 
Dans ce cas là, l'apparition furtive sera inévitable.
 
En fait, je me demande si en enlevant pas simplement cette ligne, ça devrait au moins résoudre ce problème:

Code :
  1. document.getElementById("image_prod" ).setAttribute("src", lien_image[numero]);


Reply

Marsh Posté le 01-02-2010 à 23:29:10    

Mais si j'enlève cette ligne je ne réaffecte pas ma nouvelle image à l'id "image_prod".
Je ne vois pas comment ça peut marcher...

 

EDIT: après avoir testé ça ne fonctionne pas... cela ne charge pas la nouvelle image.
En fait le plus gênant n'est pas cette apparition furtive. C'est surtout que l'image suivante prend les dimensions de la précédente... parfois...


Message édité par garath_ le 01-02-2010 à 23:44:59
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed