Problème de redimensionnement image en javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème de redimensionnement image en javascript

garath_

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 :

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

La fonction redim_image:

Code :

function redim_image(url){
var image = new Image();
image.src = url;
var h = image.height;
var w = image.width;
var dW = 0;
var dH = 0;
document.getElementById("lien_image_prod" ).value = url;
// Si la largeur ou la hauteur depasse la taille maximale
if ((h >= 110) || (w >= 230)) {
// Si la largeur et la hauteur depasse la taille maximale
if ((h >= 110) && (w >= 230)) {
dH = 110;
// On recalcule la taille proportionnellement
dW = parseInt((w * dH) / h, 10);
document.getElementById("image_prod" ).setAttribute("width", dW);
}
else if ((h > 150) && (w < 230)) {
// Si la hauteur depasse la taille maximale
dH = 110;
// On recalcule la taille proportionnellement
dW = parseInt((w * dH) / h, 10);
document.getElementById("image_prod" ).setAttribute("width", dW);
}
else if ((h < 110) && (w > 230)) {
// Si la largeur depasse la taille maximale
dW = 230;
// On recalcule la taille proportionnellement
dH = parseInt((h * dW) / w, 10);
document.getElementById("image_prod" ).setAttribute("height", dH);
}
}

Il s'agit d'une visionneuse d'image et, je sais, mon code est assez "bourrin", mais je débute, je le repete .

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

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

Publicité

garath_

Up? :hello:

tpierron

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 :

function redim_image(url) {
    var image = new Image()
    image.src = url
    document.getElementById("lien_image_prod" ).value = url
    image.onload = function() {
        var h = this.height
        var w = this.width
        var dW = 0
        var dH = 0
 
        // Si la largeur ou la hauteur depasse la taille maximale
        if (h >= 110 || w >= 230)
        {
            // Si la largeur et la hauteur depasse la taille maximale
            if ((h >= 110) && (w >= 230))
            {
                dH = 110
                // On recalcule la taille proportionnellement
                dW = (w * dH) / h | 0
                document.getElementById("image_prod" ).width = dW
            }
            else if (h > 150 && w < 230)
            {
                // Si la hauteur depasse la taille maximale
                dH = 110
                // On recalcule la taille proportionnellement
                dW = (w * dH) / h | 0
                document.getElementById("image_prod" ).width = dW
            }
            else if ((h < 110) && (w > 230))
            {
                // Si la largeur depasse la taille maximale
                dW = 230
                // On recalcule la taille proportionnellement
                dH = (h * dW) / w | 0
                document.getElementById("image_prod" ).height = dH
            }
        }
    }
}

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

garath_

Merci de ton aide!

Effectivement avec l'élément onload ça fonctionne beaucoup mieux.

J'ai bien pris note de tes conseils!

garath_

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

tpierron

garath_ a écrit :

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 :

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

garath_

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

FORUM HardWare.fr

Programmation

HTML/CSS

Problème de redimensionnement image en javascript

Sujets relatifs
image survolée qui s'affiche dans 2 div différentes	probleme liste deroulante
Problème de modélisation PowerDesigner	Probleme de double dans un JTextField
html et object image dans le lecteur avant visualisation	[Pascal] probleme
Problème de formulaire dans formulaire	Problème requête ACCESS
probleme d'enregistrement	Problème d'utilisation de Ada.Streams.Stream_Io;
Plus de sujets relatifs à : Problème de redimensionnement image en javascript

Page générée en 0.073 secondes