Bonjour, C’est Gaëtan, Développeur web Freelance dans les Alpes.

Sep 01


—- english below —-

Bonjour,
Google Chrome vient de passer en 37.0.

google chrome v37google chrome v37

Depuis cette mise à jour, les images en lazyload (chargement différé) ne s’affichent plus dans certain cas.

lazy_load_images_not_working_chrome_v37

Pas de problème javascript. C’est simplement du CSS.
En effet, les premières images présentent dans le DOM sous la forme en généralement d’un petit gif transparent d’un pixel (dans mon cas 1x1trans.gif) se voient affecté d’une taille et hauteur de 1px.
Au remplacement de l’image par le plugin/script jquery.lazyload.js, la source est bien remplacée mais l’image reste en hauteur et largeur 1px.

lazyload_jquery_googlechrome_37.0_problem

Il suffit alors d’ajouter une hauteur et une largeur par default dans le css de la page:

img.lazy {
    height: auto;
    width: auto;
}

et tout rentre dans l’ordre.

—- english —-

Hi,
Google Chrome just upgrate to 37.0.
Since then lazyload images are not showing anymore (in some case).

This i not a javascript issue. It’s only CSS.
Indeed, on DOM first images are loaded as little transparent gif (in my case 1x1trans.gif) and are now (since v37) of 1px height and width.
When jQuery lazyload plugin execute, the new source is correct but the DOM element img still 1px height and width.

You just have to set height and width to auto in your CSS file:

img.lazy {
    height: auto;
    width: auto;
}

And everything should be all right again.