Carregamento lento e esmaecimento de imagem simples

Uma das otimizações de desempenho de site mais rápidas e fáceis é diminuir o carregamento de imagens. Isso significa uma variedade de coisas, incluindo a redução de imagens com ferramentas como ImageOptim e TinyPNG, o uso de URIs de dados e sprites e o carregamento lento de imagens. É um pouco chocante quando o senhor está carregando imagens de forma preguiçosa e elas aparecem do nada, e é por isso que adoro a rota de fading in. A página ainda fica embaralhada se o senhor não estiver definindo explicitamente as dimensões da imagem, mas o fade in oferece um pouco de classe. Já vi muitas soluções que fazem isso (algumas não muito boas, como o meu método antigo), então pensei em compartilhar minha implementação atual.

O HTML

Começaremos montando a tag de imagem com detalhes específicos:

<img data-src="https://davidwalsh.name/path/to/image.jpg" alt="">

Use data-src para representar o eventual URL.

O CSS

Qualquer imagem com um data-src deve começar como invisível e, eventualmente, fazer a transição da opacidade:

img {
	opacity: 1;
	transition: opacity 0.3s;
}

img[data-src] {
	opacity: 0;
}

A esta altura, o senhor provavelmente pode adivinhar o que faremos com esse atributo quando uma imagem for carregada…

O JavaScript

…que está removendo o data-src quando a imagem é carregada:

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
	img.setAttribute('src', img.getAttribute('data-src'));
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});

Essa solução requer JavaScript, como alguns dos senhores apontaram. Para uma solução alternativa, o senhor poderia fazer o seguinte:

<noscript data-src="https://davidwalsh.name/path/to/image.jpg">
<img src="https://davidwalsh.name/path/to/image.jpg" data-src="" alt="">
</noscript>

[].forEach.call(document.querySelectorAll('noscript'), function(noscript) {
	var img = new Image();
	img.setAttribute('data-src', '');
	img.parentNode.insertBefore(img, noscript);
	img.onload = function() {
		img.removeAttribute('data-src');
	};
	img.src = noscript.getAttribute('data-src');
});

Este é um tutorial superbásico, mas, considerando que já vi muitas outras soluções, pensei em compartilhar o que implementei; ele funciona em todos os cenários que testei, incluindo alterações no histórico por meio de AJAX (como meu site faz).

É claro que isso não leva em conta o verdadeiro carregamento preguiçoso baseado em rolagem, mas isso geralmente é feito por um plug-in em sua estrutura JavaScript favorita ou por um componente autônomo. No entanto, se o senhor estiver procurando uma solução simples, esta é a solução!