2 février 2012

Régler le problème des images qui ont une height et width = 0 avec jQuery sur Chrome / Safari

Article d'archive. Publié il y a plus de six ans, il peut décrire des versions ou des pratiques qui ont depuis évolué. Nous le laissons en ligne pour sa valeur documentaire.

Bonjour,
Je viens de rencontrer un problème pénible sous Chrome, j’avais besoin de récupérer la taille des images de ma page pour les modeler à nouveau et changer leurs propriétés.

Il se trouve que j’ai fait un code correct de cette façon :

$(document).ready(function() {
   if ($("#flexicontent .desc-content img").length) {
        var elements = $("#flexicontent .desc-content img");
        elements.each(function(){
            alert($(this).width());
        });
    }
}

Et ce code marchait sur certaines images et pas sur d’autres… Pourquoi? Et bien, il se trouve que même après un document.ready, les images ne sont pas forcément chargées et tout particulièrement leurs propriétés. Il faut donc remplacer ce code par le code suivant :

$(window).load(function () {
   if ($("#flexicontent .desc-content img").length) {
        var elements = $("#flexicontent .desc-content img");
        elements.each(function(){
            alert($(this).width());
        });
    }
}

L’évènement $(window).load nous donnera les bonnes propriétés aux images.