[dev] Prosty i szybki sposób na lazy-loading

Lazy loading to jedna z tych rzeczy, o którą krzyczy Google PageSpeed. I choć sama idea zaspokajania ich wybujałych wymagań może komuś nie leżeć blisko serca, to znajdą się jeszcze trochę ciekawsze powody, by zwrócić na to uwagę.

Teoria

Choć wszyscy mamy zazwyczaj szybki internet, to jednak czasem się zdarzy, że będziemy na limitowany połączeniu, albo tym wolniejszym. Szkoda by było zmarnować tak cenny transfer na dane, których nie widzimy na ekranie w tej chwili, a może nawet i nie zobaczymy ich w ogóle.

Lazy loading pozwala na pobieranie jedynie obrazków wyświetlanych na ekranie, te „niżej” ładując dopiero gdy zbliżamy się do danego miejsca.

W zależności od tego, gdzie ustawimy punkt aktywujący skrypt, możemy widzieć jak on działa, a może działać tak, że zobaczymy to jedynie w przypadku bardzo wolnego połączenia.


W poniższym rozwiązaniu fajne jest to, że nie polegamy na wtyczkach, a jedynym wymogiem jest jQuery, które bez problemu możecie dorzucić na dowolnej stronie internetowej. Nie ma więc znaczenia, czy macie stronę na WordPressie, czy na dowolnym innym CMS-ie, czy w ogóle stronę statyczną napisaną w wybranym przez Was języku.

Praktyka

Edytując kod HTML swojej strony, tam gdzie wywołujecie obrazki, zamieńcie src na data-src. I tyle. Możecie dodać sobie klasę, którą będziecie aktywować javascript, choć data-src w wielu przypadkach wystarcza.

Najlepiej stosować takie na stronie głównej / kategoriach / archiwum, gdzie macie dużo zdjęć i stosunkowo długą stronę – czyli sporo zdjęć znajduje się również poniżej widocznego obszaru.

HTML

<a href="<?php the_permalink(); ?>" class="cover lazy">
    <img data-src="<?php echo $thumb[0]; ?>" alt="<?php the_title(); ?>"> 
</a>

Do tego potrzebny jest kawałek JavaScriptu, oczywiście w moim przypadku to jQuery.

JavaScript

<script>
var $ = jQuery;
$(window).scroll(function() {
	$('img[data-src]').each(function() {
		$trigger = $(this).parent().offset().top;

		if ($(window).scrollTop() + $(window).height() > $trigger) {
			img = $(this).attr('data-src');

			$(this).removeAttr('data-src');
			$(this).attr('src', img);
		}
	});
});

$(window).load(function() {
	$('img[data-src]').each(function() {
		$trigger = $(this).parent().offset().top;

		if ($(window).scrollTop() + $(window).height() > $trigger) {
			img = $(this).attr('data-src');
			$(this).removeAttr('data-src');
			$(this).attr('src', img);
		}
	});
});
</script>

Jeśli chcecie. aby efekt doładowywania zdjęć nie był aż tak widoczny, jest na to kilka sposobów. Na szybko, co najmniej dwa:

Możecie zmienić matematykę przy liczeniu punktu aktywacji, mnożąc $(window).height() w tym kawałku: if ($(window).scrollTop() + $(window).height() > $trigger) przez 1.5. Bo teraz, obrazki zaczynają się ładować gdy tylko scrollujecie do widoku tych obrazków. Zwiększenie tej wartości wcześniej aktywuje pobieranie.

Opcja numer dwa to tylko wizualne dodanie animacji w CSS-ie, która dosłownie upiększa ładowanie.

CSS

img {
	max-width: 100%;
	height: auto;
	transition: all 0.3s;
}

img[data-src] {
	opacity: 0;
	transform: translateY(40px);
}

img[src] {
	opacity: 1;
	transform: translateY(0);
}

Koniecznie dajcie znać, jak bardzo podniosło to Wasze wyniki! I czy chcecie więcej takich krótkich tutoriali.

niedziela
22.03.2020
0
89

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *