Obrazki migają przy starcie strony

W HTML w przypadku obrazków o dynamicznie ustawianych rozmiarach lub obrazków ładowanych z wolnych źródeł, na przykład z odległego serwera, może występować krótkotrwałe migotanie podczas ładowania i renderowania obrazka. Aby zminimalizować lub całkowicie wyeliminować to migotanie, istnieje kilka skutecznych technik. Jednym z podejść jest wcześniejsze zdefiniowanie rozmiaru kontenera, w którym znajduje się obrazek, przed faktycznym załadowaniem obrazka. Dzięki temu można uniknąć nagłej zmiany rozmiaru po załadowaniu obrazka. Innym podejściem jest zastosowanie JavaScript, aby kontrolować widoczność obrazka i pokazywać go dopiero po załadowaniu. W dzisiejszym wpisie omówię tę drugą metodę i pokażę, jak sobie poradzić, gdy JavaScript jest wyłączony.

Rozwiązanie z użyciem JavaScript.

W pierwszej kolejności w stylach ustawiam wszystkie obrazki na ukryte a przezroczystość body na 0. Dodaję też animację płynnego przejścia do pełnej widoczności. Oto przykładowy kod CSS:

body {
	opacity: 0;
	transition: opacity 0.1s ease-in;
}
img {
	visibility: hidden;
}

Następnie do strony dodaję JavaScript, który po załadowaniu strony przywróci widoczność:

window.addEventListener('load', function() {
	var images = document.querySelectorAll('img');

	images.forEach(function(image) {
			image.style.visibility = 'visible';
	});

	document.body.style.opacity = 1;
});

A co gdy mam wyłączony JavaScript ?

Jeżeli masz wyłączony JavaScript to strona pozostanie niewidoczna. Jest na to prosty sposób. Wystarczy dodać odpowiedni tag noscript:

	<noscript>
		<style>
			body {
				opacity: 1;
			}

			img {
				visibility: visible;
			}
		</style>
	</noscript>

Jak mogę to przetestować. Moja przeglądarka nie ma opcji wyłączenia JS ?

Zarówno przeglądarka Chrome, jak i Firefox posiadają dodatek o nazwie "Web Developer", który umożliwia wyłączanie JavaScriptu.

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

https://addons.mozilla.org/en-US/firefox/addon/web-developer/