Maj
21
2015

Ładowanie elementu podczas przewijania

W rankingu, który został przeprowadzony na zlecenie Amerykańskiego Instytutu Badawczego (na dzień 10 maj 2015 r.) dowiedzieliśmy się, że średnia prędkość internetu stacjonarnego w Polsce nie przekracza 9 Mb/s z haczykiem. Taki wynik, choć do rewelacji mu daleko, daje Polsce solidne 27. miejsce na świecie. To prędkość internetu stacjonarnego, jaka w takim razie jest prędkość łącza w przypadku urządzeń mobilnych? Na ten moment to ok. 5 Mb/s – zdecydowanie mniej. Strony są wczytywane wolniej, a użytkownicy na urządzeniach mobilnych są szczególnie niecierpliwi więc powinniśmy zrobić wszystko aby czas ładowania strony był jak najmniejszy.  W celu skrócenia tego czasu możemy zastosować kilka technik, o jednej z tej praktyce możecie przeczytać poniżej. Jest to zastosowanie dynamicznego ładowania elementów podczas przewijania (scrollowania).

Na jednym z portali aukcyjnych podczas listowania produktów na jednej ze stron domyślnie wyświetla się 20. Ile widzimy ich na jednej stronie? To zależy od wielkości wyświetlacza i oczywiście od rozdzielczości urządzenia na którym wyświetlamy stronę. Najczęściej jednak będzie to mniej niż połowa wszystkich. Aby uatrakcyjnić sam listing produktów, wstawiane są zdjęcia, które dają nam pogląd na produkt. To właśnie przede wszystkim zdjęcia powodują bardzo długie wczytywanie się strony. Jeśli widzimy ich połowę, to czemu nie mielibyśmy ładować tylko połowy zdjęć?

Odpowiedź raczej nie powinna być inna, jeśli optymalizacja to na całego. Napiszmy więc plugin który będzie służył nam do filtrowania czy produkt jest widziany na ekranie czy nie.

(function($) {
  $.expr[":"].seen= function(element) {
    var $window = $(window)
    var viewport_top = $window.scrollTop()
    var viewport_height = $window.height()
    var viewport_bottom = viewport_top + viewport_height
    var $element = $(element)
    var top = $element.offset().top
    var height = $element.height()
    var bottom = top + height

    return (top >= viewport_top && top < viewport_bottom) ||            (bottom > viewport_top && bottom <= viewport_bottom) ||            (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
  }
})(jQuery);

Od teraz posiadamy dostęp do filtra :seen, który możemy wykorzystać w każdej chwili. Jak go wykorzystać? Bardzo prosto. Załóżmy, że posiadamy na stronie <div> o identyfikatorze image i chcielibyśmy sprawdzić czy jest on widzialny. Wstawmy sobie do konsoli poniższy kod:

 $("div#image").filter(":seen");

Jeśli selektor jest widoczny na stronie, powinien zwrócić nam w konsoli właśnie ten element. Spróbujmy wykorzystać powyższą technikę oraz zdobytą wiedzę do pobierania zdjęć i wstawiania ich do elementu, które są tylko i wyłącznie widoczne na stronie.

1. Utwórzmy funkcję, która będzie tworzyła nam tablicę z liczbą produktów, która została załadowana. Pomoże nam ona sprawdzić, czy produkt został już załadowany czy jeszcze nie.

putintoarray = function(prid) {
        if(typeof productarray == 'undefined') {
             productarray = [];
        }
	var isInArray = $.inArray(prid, productarray);
	if(isInArray == -1) {
		productarray.push(prid);
        }
}

2. Utwórzmy funkcję, która będzie znajdywała elementy, które np. posiadają atrybut productid, a następnie sprawdzała czy jest on widoczny na stronie, jeśli tak – to niech iteruje po każdym znalezionym elemencie stworzy zapytanie, którego odpowiedzią będzie nazwa obrazka zapisanego w formacie JSON.

var loadImages = function() {

	$("[productid]").filter(":onScreen").each(function(a,b) {
	   var productid = $(b).attr("productid"); 
	   putintoarray(productid);
		$.ajax({
			type: "post",
			data: {productid:productid}
			dataType:"json",
			success: function(data) {
				var element = data.parseJSON();
				//robimy cos z dostanym elementem
				$("#product_" + productid).html("nowy obrazek");
			}
		});
	});

}

3. Utwórzmy funkcję, która będzie reagowała na scrollowanie strony:

$(window).scroll(function(){
	loadImages();
});

4. Utwórzmy funkcję, która będzie wczytywać się po załadowaniu wszystkich elementów na stronie:

$(window).load(function() {
		loadImages();
	});

Powyższa technika na bardzo podobnej zasadzie jest stosowana m.in do Inifinity Scroll w portalach społecznościowych. To bardzo wygodne narzędzie dla użytkowników, którzy tylko scrollują, scrollują… i scrollują, zobaczcie tylko sami:

 

Powiązane wpisy

Autor wpisu:

Jakub Kądzielawa - młodszy programista PHP, student Informatyki, który łączy pracę ze swoją pasją. Czasami narzeka na brak wolnego czasu.

Zostaw komentarz