Problem z wysokością i pozycją obrazków – masonry, isotope

Wraz z responsive web design, ludzie zaczęli zmieniać rozmiar okna aby sprawdzić jak strona się dopasowuje. Oczywiście jeśli właśnie po to przyszli. Normalni użytkownicy, którzy przyszli przeczytać lub zobaczyć coś, nie robią tego. Tak czy inaczej ostatnio zauważyłam, że coraz więcej stron wykorzystuje masonry lub isotope. Zapewne dlatego, że mają ten fajny efekt “shuffle” przy zmianie rozmiaru okna (lub sortowania). Działają poprzez pobranie absolutnej pozycji i rozmiarów elementów. Problemem jest, że w responsive web design (lub fluid) żeby obrazki mogły się dobrze dopasować nie definiujemy ich rozmiarów. Będę odnościć się do masonry jako, że jest całkowicie darmową biblioteką, ale rozwiązanie również będzie działać dla isotope.

Problem

Zazwyczaj w jQuery inicjujemy rzeczy w $(document).ready(). Tak więc jeśli zainicjujesz masonry w ten sposób:

$(function(){
	var $container = $('#container');
	// initialize
	$container.masonry({
		itemSelector: '.item'
	});
});

a w elementach masz obrazki które nie mają zdefiniowanych rozmiarów, możesz otrzymać to:

Nie dobrze. Zdjęcia nachodzą na siebie. Moje koty NIE SĄ zadowolone.

Dlaczego obrazki nachodzą na siebie?

Jak napisałam na początku, biblioteki pobierają absolutną pozycję i rozmiary. To oczywiste, że nie możesz pobrać pozycji i rozmiaru czegoś co jeszcze nie istnieje. Gdy umieszczasz inicjalizację w $(document).ready() możesz być prawie pewien, że będziesz miał ten problem przy pierwszym ładowaniu strony. Dlaczego? Ponieważ jest wywoływana kiedy dokument jest gotowy, a to zazwyczaj jest znacznie wcześniej niż zdjęcia są. Jest szansa, że następnym razem będzie to wyświetlone poprawnie jeśli przeglądarka użyje obrazków z pamięci podręcznej.

Rozwiązanie numer 1

Po prostu umieść inicjalizację masonry w $(window).load() zamiast $(document).ready().

$(window).load(function(){
	var $container = $('#container');
	// initialize
	$container.masonry({
		itemSelector: '.item'
	});
});

Dzięki temu zostanie wywołana gdy już wszystkie elementy strony zostaną załadowane. W tym momencie możemy pobrać prawidłowe wartości i wszystko wygląda dobrze

i koty są zadowolone ;o)

Rozwiązanie numer 2

Jeśli mamy bardzo dużo elementów na stronie, to czekanie aż wszystkie się załadują może nie być dobrym rozwiązaiem. Jeśli tak jest to powienieneś się zainteresować imagesLoaded. Rozwiązanie z wykorzystaniem imagesLoaded zostało już opisane na stronie masonry tak więc nie będę już go powtarzać :o)