11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Calcul de la hauteur d'une image : bug du premier chargement

Bonjour Smiley smile

J'utilise jQuery pour calculer la hauteur d'une image pour la centrer verticalement dans un div#carre qui fait 336px de hauteur.
Voici le bout de code que j'utilise pour cela :
    $('#carre img').each(function(i){
        var ah = $('#carre img').eq(i).height();
        var ph = $('#carre').height();
        var mh = (ph - ah) / 2;
        $('#carre img').eq(i).css('margin-top', mh);
    });

Et ça fonctionne !

Sauf lors du tout premier chargement du site.
Une fois les fichiers en cache, ça fonctionne parfaitement.

Voici le code généré lors du premier chargement :
<div id="carre">
  <img style="margin-top: 168px;" src="5.jpg" alt="" />  
</div>


Voici le code généré lors du deuxième chargement (et suivants) :
<div id="carre">
  <img style="margin-top: 68px;" src="5.jpg" alt="" />  
</div>


Le pb vient du calcul de la hauteur de l'image qui ne parvient pas à se faire lors du premier chargement.
C'est pourquoi on retrouve un margin-top de 168px.

Donc à priori, ça semble normal puisqu'au &er chargement de la page, le code javascript n'a pas idée de l'image à venir...
Mais ça doit être contournable comme problème non ?
Modifié par Spheerys (18 Nov 2008 - 10:44)
Oui, c'est normal, il faut déclencher le centrage uniquement après chargement de l'image, or les éléments <img> disposent d'une méthode onload et d'une propriété complete.

Donc il faut faire quelque chose qui ressemble à ça :


if (!imgElt.complete) { // Si l'image n'a pas encore été téléchargée
  imgElt.onload = functionCentrage;
} else { // Sinon...
  functionCentrage();
}


@+
Merci Smiley smile

J'ai eu un peu de mal à adapter le code mais après recherche, voici le code qui fonctionne chez moi :
    $("#carre img").load(function() {
         $('#carre img').each(function(i){
            var ah = $('#carre img').eq(i).height();
            var ph = $('#carre').height();
            var mh = (ph - ah) / 2;
            $('#carre img').eq(i).css('margin-top', mh);
        });
    });

Si ça peut servir à quelqu'un Smiley smile
Bonjour,

Utiliser la méthode jQuery load() puis la méthode each(), ce n'est pas redondant? Si $('#carre img').load() associe un gestionnaire d'évènement à chaque image visée, utiliser $('#carre img').each dans la fonction associée à l'évènement est à priori une erreur.

Quelque chose comme ceci marcherait peut-être (même s'il y a sans doute des corrections à faire):
var carre_height = $('#carre').height();
$("#carre img").load(function() {
	var img_height = $(this).height();
	var img_margin = (carre_height - img_height) / 2;
	$(this).css('margin-top', img_margin);
});


Et si l'image est le seul contenu de la DIV, ça peut aussi se gérer en CSS. De multiples façons (display: inline-block ou typiquement display: table-cell, mais problèmes de compatibilités IE 6-7 pour ce dernier), dont la suivante:
http://web.covertprestige.info/test/46-centrer-image-conteneur-fixe.html
Sujet clos
Aller à