La maggior parte dei motori di ricerca indicizzerà le immagini nascoste purché non si utilizzino gli stili incorporati per nascondere l'immagine. La maggior parte dei browser non carica immagini nascoste.
C'è una pagina di prova che può verificare questo reclamo. Alcuni browser mobili meno recenti fanno eccezione, ma sostengo che il caricamento lento sui telefoni cellulari potrebbe essere controproducente per una buona esperienza di navigazione.
http://www.w3.org/2009/03/image-display-none/test.php
Nel tuo file CSS aggiungi la seguente modifica.
.lazy-img { display: none; }
Ora puoi caricare una pagina con immagini pigre come questa e verranno indicizzate.
<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>
È importante includere l' titleattributo per l'immagine. Oppure circondi il <imgtag> con un link <a> tag e testo del link. Altrimenti i motori di ricerca assoceranno le parole chiave all'immagine in base alla distanza delle parole. Stai andando a tutti questi problemi per SEO che potresti anche andare fino in fondo.
Se usi quanto sopra così com'è. Nulla mostrerà come le immagini sono nascoste. Si desidera rimuovere questa classe nella parte inferiore del documento. La chiave qui è usare il Javascript puro in linea. Questo Javascript viene eseguito immediatamente dopo che il layout degli elementi sopra è terminato. Se carichi tutti i tuoi file JS esterni in basso (come dovresti). Dovresti posizionare questo blocco Javascript sopra quei file. In modo che non vi siano ritardi nella modifica 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>
Ora ho aggiunto i condizionali per IE9 poiché non supporta getElementsByClassName8 e precedenti. Ciò che dovrebbe accadere (non testato) è che quei browser caricheranno l'immagine così com'è.
Il vantaggio di questo approccio è che mantiene pulito l'HTML dal punto di vista del webcrawler.