Imitacja efektu ‘leniwego’ ładowania zdjęć – lazy loading jquery

Głównym celem leniwego ładowania zdjęć, poza zwiększeniem atrakcyjności wyglądu witryny, jest zmniejszenie transferu i przyspieszenie ładowania strony. Wpis natomiast będzie dotyczył imitacji efektu, nie zmniejszy zużycia transferu ani nie przyspieszy ładowania strony, ale zwiększy atrakcyjność jej wyglądu.

DEMO

Funkcja działa w oparciu o bibliotekę jquery więc niezbędne będzie załączenie do pliku najnowszej wersji jquery. W tym celu na samym początku pliku, najlepiej w sekcji head dodaj:

 
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Sama funkcja nie jest bardzo skomplikowana, pobiera odległość danego elementu od początku dokumentu (strony) i porównuje z obecną wysokością scrolla przeglądarki. Jeśli pasek jest niżej niż początek kolejnego elementu, uruchamia się animacja jquery. Funkcję również należy umieścić w sekcji head, najlepiej zaraz po dołączonym pliku jquery.

 
<script>
	function showElement(what, duration) {
		$(what).each(function (i) {
			var top = $(this).offset().top;
			var height = $(this).outerHeight()+$(window).scrollTop();
 
			if (top < height) {
				$(this).animate({ opacity: 1 }, duration);
			}
		});
	}
</script>

Do poprawnego działania funkcji niezbędne jest ukrycie obrazków, poprzez nadanie im opacity: 0.

 
<style>
	img {
		opacity: 0;
	}
</style>

Funkcja posiada dwa argumenty, pierwszy to element, który ma zostać pokazany z animacją, drugi to czas animacji w milisekundach (700ms = 0,7s). Wywołanie funkcji jest proste, ale trochę problematyczne ponieważ trzeba ją wywołać 2 razy. Pierwszy raz, żeby wyświetlić obiekty, które muszą być widoczne od razu po załadowaniu strony. Drugi raz podczas przewijania okna przeglądarki. Spowodowane jest to tym, że funkcja scrollTop wywoływana jest tylko dla zdarzenia $(window).scroll();

 
</script>
	$(window).load(function() {
		showElement('img', 700);
	});
	$(window).scroll(function () {	
		showElement('img', 700);
	});
</script>

Jak poprzednio, kod należy umieścić w sekcji head, na przykład po zdefiniowaniu funkcji showElement. Znając podstawy jquery lub/i css można bardzo łatwo zdefiniować konkretny kontener, w którym mają być animowane zdjęcia. Natomiast zmieniając drugi argument można zmienić szybkość animacji, 1000 milisekund = 1 sekunda.

 
</script>
	$(window).load(function() {
		showElement('.kontener img', 1000);
	});
	$(window).scroll(function () {	
		showElement('.kontener img', 1000);
	});
</script>

Przykład całego kodu, który należy wkleić w sekcję head

		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script>
		function showElement(what,duration) {
			$(what).css('opacity',0);
			$(what).each(function (i) {
				var top = $(this).offset().top;
				var height = $(this).outerHeight()+$(window).scrollTop();
 
				if (top < height) {
					$(this).animate({ opacity: 1 }, duration);
				}
			});
		}
		$(window).load(function() {
			showElement('img', 700);
		});
		$(window).scroll(function () {	
			showElement('img', 700);
		});
		</script>

DEMO znajduje się pod tym linkiem.

  • niepodam

    Dobry pomysł, ponieważ obrazki są poprawne pod względem SEO.