Carregamento preguiçoso de imagens com degradação elegante (JavaScript)

Considere uma página HTML com várias tags cada uma com seu próprio conteúdo. Eu quero transformar cada tag em um slide em um slideshow impulsionado por JavaScript. Cada tag pode conter imagens e elas devem ser carregadas de forma preguiçosa neste slideshow. Eu não quero que todas as imagens carreguem de uma vez.

Por outro lado, usuários sem JavaScript ativado e motores de busca devem ver apenas a marcação e todas as imagens. Como faço para evitar que as imagens sejam carregadas quando o JavaScript está ativado, e como faço para garantir que as imagens sejam carregadas quando o JavaScript não está ativado?

Uma forma seria substituir todas as imagens por este formato:

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

O problema com essa solução é que não há degradação elegante.

Em vez disso, eu tenho que fazer:

<img src="myimage.png">

O problema com isso é que você não pode impedir que o navegador carregue todas as imagens na página HTML. Eu tentei modificar o HTML de várias maneiras quando o documento está pronto. Por exemplo, substituir todos os atributos src nas imagens por data-src, esvaziar todo o corpo e assim por diante.

Eu realmente preciso sacrificar a degradação graciosa?

Obrigado(a) desde já.

Resposta #1

O método mais simples pode ser duplicar as tags de imagem incluídas em uma tag <noscript> e usar seu atributo src. Acima ou abaixo disso, você poderia ter as mesmas tags com o atributo data-src personalizado, detectar e carregá-las de forma preguiçosa com Javascript.

Resposta #2

Você poderia incluir ambas as versões:

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

Pode ser bom relacionar as tags <img> separadas lá para que seu código JavaScript possa mantê-las sincronizadas. Por exemplo:

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

Então seu código JS pode garantir que as imagens “scripty” recebam as classes etc., para que você não precise manter as duas versões atualizadas manualmente (desculpe o exemplo com jQuery; claro que você faria isso da forma que quiser):

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

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