La mayoría de los motores de búsqueda indexarán imágenes que están ocultas siempre que no use estilos en línea para ocultar la imagen. La mayoría de los navegadores no cargarán imágenes ocultas.
Hay una página de prueba que puede verificar este reclamo. Algunos navegadores móviles más antiguos son la excepción, pero sostengo que la carga lenta en los teléfonos móviles podría ser contraproducente para una buena experiencia de navegación.
http://www.w3.org/2009/03/image-display-none/test.php
En su archivo CSS agregue la siguiente modificación.
.lazy-img { display: none; }
Ahora puede cargar una página con imágenes perezosas como esta y se indexarán.
<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>
Es importante que incluya el titleatributo de la imagen. O puede rodear la <imgetiqueta> con un enlace <a> etiqueta y texto de enlace. De lo contrario, los motores de búsqueda asociarán palabras clave con la imagen por distancia de palabra. Vas a tener todos estos problemas para SEO, también podrías ir hasta el final.
Si usa lo anterior como está. Nada se mostrará ya que las imágenes están ocultas. Desea eliminar esta clase en la parte inferior del documento. La clave aquí es usar Javascript puro en línea. Este Javascript se ejecuta inmediatamente después de finalizar el diseño de los elementos anteriores. Si carga todos sus archivos JS externos en la parte inferior (como debería). Debería colocar este bloque Javascript encima de esos archivos. Para que no haya retraso en la modificación del 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>
Ahora agregué condicionales para IE9 ya que no es compatible getElementsByClassNamecon 8 y anteriores. Lo que debería suceder (no probado) es que esos navegadores simplemente carguen la imagen tal como está.
La ventaja de este enfoque es que mantiene el HTML limpio desde la perspectiva del webcrawler.