Carga diferida de imágenes con degradación (JavaScript)

Question

Considere una página HTML con varias etiquetas, cada una con su propio contenido. Quiero transformar cada etiqueta en una diapositiva en una presentación de diapositivas con JavaScript. Cada etiqueta puede contener imágenes y deben cargarse de forma diferida en esta presentación de diapositivas. No quiero que todas las imágenes se carguen a la vez.

Por otro lado, los usuarios que no tengan JavaScript habilitado y los motores de búsqueda solo deben ver el marcado y todas las imágenes. ¿Cómo evito que las imágenes se carguen cuando JavaScript está habilitado y cómo me aseguro de que las imágenes se carguen cuando no se habilite JavaScript?

Una forma sería la de sustituir todas las imágenes con este formato:

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

El problema con esta solución es que no hay degradación elegante.

En cambio, tengo que hacer:

<img src="myimage.png"> 

El problema con esto es que no se puede evitar que el navegador cargue todas las imágenes en la página HTML. Intenté modificar el HTML de varias maneras cuando el documento está listo. Por ejemplo, reemplace todos los atributos de src en las imágenes con data-src, vacíe todo el cuerpo y así sucesivamente.

¿Realmente tengo que sacrificar la degradación elegante?

Gracias de antemano.

Answer 1

El método más simple podría ser duplicar las etiquetas de imagen incluidas en una etiqueta <noscript> y usar su atributo src. Por encima o por debajo de eso, podría tener las mismas etiquetas con el atributo personalizado data-src, detectarlas y cargarlas de forma diferida con Javascript.

Answer 2

podría incluir dos versiones:

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

podría ser bueno para relacionar los <img> separar las etiquetas no para que el código JavaScript puede mantenerlos sincronizados. Por ejemplo:

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

A continuación, el código JS puede asegurarse de que las imágenes "scripty" recoger las clases, etc por lo que no tiene que mantener manualmente las dos versiones actualizadas (perdón por el ejemplo de jQuery, por supuesto lo harías como quieras):

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

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