Caricamento lento delle immagini con degradazione elegante (JavaScript)

Question

Si consideri una pagina HTML con un gruppo di tag ciascuno con il proprio contenuto. Voglio trasformare ogni tag in una diapositiva in una presentazione alimentata da JavaScript. Ogni tag può contenere immagini e dovrebbe essere pigro caricato in questa presentazione. Non voglio caricare tutte le immagini contemporaneamente.

D'altra parte, gli utenti senza JavaScript abilitato e motori di ricerca dovrebbero solo vedere il markup e tutte le immagini. Come evito che le immagini vengano caricate quando JavaScript è abilitato e come posso assicurarmi che le immagini vengano caricate quando non è abilitato JavaScript?

Un modo sarebbe quello di sostituire tutte le immagini con questo formato:

<img src="" data-src="myimage.png"> 

Il problema di questa soluzione è che non c'è alcun degrado grazioso.

Invece, quello che devo fare:

<img src="myimage.png"> 

Il problema di questo è che non si può impedire al browser di caricare tutte le immagini nella pagina HTML. Ho provato a modificare l'HTML in diversi modi quando il documento è pronto. Ad esempio, sostituire tutti gli attributi src nelle immagini con data-src, svuotare l'intero corpo e così via.

Devo davvero sacrificare il degrado aggraziato?

Grazie in anticipo.

Answer 1

Il metodo più semplice potrebbe essere quello di duplicare i tag immagine racchiusi in un tag <noscript> e utilizzare l'attributo src. Al di sopra o al di sotto di questo, potresti avere gli stessi tag con l'attributo personalizzato data-src, rilevarli e caricarli in modo pigro con Javascript.

Answer 2

Si potrebbe includere entrambe le versioni:

<img src="" data-src="myimage.png"> 
<noscript> 
    <img src="myimage.png"> 
</noscript> 

potrebbe essere buono mettere in relazione le diverse <img> tag là in modo che il codice JavaScript possa mantenere in sincronia. Per esempio:

<img src="" class='lazy' data-master="myimage"> 
<noscript> 
    <img id="myimage" class='super-sized interesting' src="myimage.png"> 
</noscript> 

Poi il codice JS può fare in modo che le immagini "Scripty" raccogliere le classi, ecc in modo che non si devono tenere manualmente le due versioni aggiornate (scusate l'esempio jQuery, naturalmente lo faresti come vuoi):

$('img.lazy').each(function() { 
    var $lazy = $(this), 
    master = $('#' + $lazy.data('master'))[0]; 

    $lazy.src(master.src); 
    $lazy.className += master.className; 
    // etc 
});