Jednoduché načítání a blednutí obrazu

Jednou z nejrychlejších a nejjednodušších optimalizací výkonu webu je snížení načítání obrázků. To znamená celou řadu věcí, včetně minimalizace obrázků pomocí nástrojů jako ImageOptim a TinyPNG, používání datových URI a spritech a pomalého načítání obrázků. Když jste líní načítání obrázků, je to trochu rušivé a objevují se jen tak z ničeho nic, a proto miluji cestu mizení. Stránka se stále zamíchá, pokud explicitně nenastavíte rozměry obrázku, ale prolínání poskytuje malý kousek třídy. Viděl jsem mnoho řešení, která toho dosáhla (některá nejsou moc dobrá, jako moje stará metoda), a tak jsem si řekl, že se podělím o svou současnou implementaci.

HTML

Začneme sestavením značky obrázku se specifiky:

<img data-src="/path/to/image.jpg" alt="">

Použijte data-src reprezentovat případnou adresu URL.

CSS

Jakýkoli obrázek s data-src atribut by měl začínat jako neviditelný a nakonec by měl změnit neprůhlednost:

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

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

V tuto chvíli pravděpodobně můžete hádat, co s tímto atributem uděláme, až se obrázek načte...

JavaScript

...což odstraňuje data-src atribut při načtení obrázku:

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

Toto řešení vyžaduje JavaScript, jak někteří z vás uvedli. Pro záložní řešení můžete udělat toto:

<noscript data-src="/path/to/image.jpg">
<img src="/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');
});

Toto je super základní návod, ale vzhledem k tomu, že jsem viděl tolik jiných řešení, myslel jsem, že bych se podělil o to, co jsem implementoval; funguje ve všech scénářích, které jsem testoval, včetně změn historie prostřednictvím AJAX (jako to dělá můj web).

To samozřejmě nebere v úvahu skutečné líné zatížení založené na rolování, ale to se obvykle provádí pomocí pluginu ve vašem oblíbeném rámci JavaScriptu nebo samostatnou komponentou. Pokud však hledáte jednoduché řešení, toto je ono!