La plupart des moteurs de recherche indexent les images masquées tant que vous n'utilisez pas de styles intégrés pour masquer l'image. La majorité des navigateurs ne chargeront pas d' images cachées.
Une page de test peut vérifier cette affirmation. Certains anciens navigateurs mobiles sont l'exception, mais je soutiens que le chargement paresseux sur les téléphones mobiles pourrait être contre-productif pour une bonne expérience de navigation.
http://www.w3.org/2009/03/image-display-none/test.php
Dans votre fichier CSS, ajoutez la modification suivante.
.lazy-img { display: none; }
Vous pouvez maintenant charger une page avec des images paresseuses comme celle-ci et elles seront indexées.
<body>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>
Il est important d'inclure l' titleattribut de l'image. Ou vous entourez la <imgbalise> avec un lien <a> balise et le texte du lien. Sinon, les moteurs de recherche associeront des mots clés à l'image par distance de mot. Vous allez avoir tous ces ennuis pour le référencement, autant aller jusqu'au bout.
Si vous utilisez ce qui précède tel quel. Rien ne s'affichera car les images sont cachées. Vous souhaitez supprimer cette classe au bas du document. La clé ici est d'utiliser du Javascript pur en ligne. Ce Javascript est exécuté immédiatement après la mise en page des éléments ci-dessus. Si vous chargez tous vos fichiers JS externes en bas (comme vous devriez). Vous devez placer ce bloc Javascript au-dessus de ces fichiers. Pour qu'il n'y ait aucun décalage dans la modification du DOM.
<body>
<!--[if lte IE 8]
<style type="text/css">.lazy-img { display: block !important; }</style>
[endif]-->
<noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
<![if gte IE 9]>
<script type="text/javascript">
var images = document.getElementsByClassName('lazy-img');
Array.prototype.forEach.call(images, function(image){
image.setAttribute("data-src",image.getAttribute("src"));
image.setAttribute("src","loading.gif");
});
while(images.length > 0) { images[0].className = ""; }
</script>
<![endif]>
</body>
Maintenant, j'ai ajouté des conditions pour IE9 car il ne prend pas en charge les versions getElementsByClassName8 et antérieures. Ce qui devrait arriver (non testé) est que ces navigateurs chargeront simplement l'image telle quelle.
L'avantage de cette approche est qu'elle garde le HTML propre du point de vue du webcrawler.