Pojawiające się obrazki

Cześć

Szukam pluginu jQuery bądź porady jak wykonać następującą rzecz:

Czasem na stronach, w galerii zdjęć obrazki nie są wczytywane od razu przy załadowaniu strony, ale wczytują się dopiero, gdy user zjedzie w dół strony. Generalnie chodzi o to, że jak na jednej stronie wyświetlamy pod sobą np. 100 obrazków, żeby nie zasysać ich na raz, a jedynie wtedy, gdy mają być widoczne na ekranie.

Mam nadzieję, że nie zamieszałem za bardzo :) Szukam tego w googlach drugą godzinę, ale nawet nie bardzo wiem, co wpisać.

http://www.appelsiini.net/projects/lazyload

Dzięki. Błyskawiczna pomoc.

A czy zna ktoś jeszcze tego typu biblioteki?

Niezależnie jakim bym zaawansowanym użytkownikiem nie był, nie można nakierowywać na rozwiązania których już nie powinno się stosować przy obecnym projektowaniu stron www.

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

RFabianski napisał(a)

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

Bo nowoczesne przeglądarki same o to dbają.

winerfresh napisał(a)

RFabianski napisał(a)

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

Bo nowoczesne przeglądarki same o to dbają.

Ale mrowie użytkowników nie ma nowoczesnych przeglądarek...

Ten LazyLoad nie działa na mojej stronie (nie wiem czemu, ale mam już dość próbowania). Chcę spróbować napisać sam taką funkcję, ale nie wiem jak wywołać odpowiednie zdarzenie, kiedy obrazek (a właściwie miejsce na niego) będzie na ekranie. Jakieś pomysły?

EDIT: ok, mam taki kod, ale nie działa do końca jakbym chciał (nie wiem czemu):

$(window).scroll(function(){
	$('#lazy_gallery img').each(function(){		//dla kazdego obrazka w divie #lazy_gallery
		
		if($(this+'[original]'))	//jezeli element jeszcze ma atrybut "original"
		{
			if($(this).position().top<=($(window).height()))	//jezeli element jest widoczny
			{
				$(this).hide();									//ukryj go
				$(this).attr('src',$(this).attr('original'));	//nadal mu wlasciwe zrodlo
				$(this).removeAttr('original');					//usun atrybut "ariginal"
				$(this).fadeIn(500);							//pokaz element
			}
		}
	});
});
 

W HTML mam po prostu:

<div id="lazy_gallery">

<img src="images/blank.png" original="images/1.gif"><br>
<img src="images/blank.png" original="images/2.gif"><br>
<img src="images/blank.png" original="images/3.gif"><br>
<img src="images/blank.png" original="images/4.gif"><br>
...

</div>

zrób sobie atrybut data-original, bedzie bardziej jak html5, i użyj sobie biblioteki waypoint, mniej więcej tak:

$('#lazy_gallery img').waypoint(function() {
  $(this).attr('src',$(this).attr('data-original'));
  $(this).removeAttr('data-original');   
}, {triggerOnce:true, offset: '100%'});

a zabawa w fadeIn nie ma sensu.

1. przeglądarka nie ładuje ukrytych obrazków (z wyjątkiem firefoxa bodajże, który nie dość, że je ładuje to jeszcze wszystkie wpycha do ramu)
2. po zmianie atrybutu minie jakieś 2sekundy (zależy od łącza i jakie masz obrazki - ale chyba duże, że robisz coś takiego) zanim obrazek się załaduje. I taki niezaładowany obrazek ty pokazujesz z piękną animacją - bez sensu.

jeżeli koniecznie to chcesz to na funkcji z waypointa preloaduj obrazek (google Ci pomoze) i po jego załadowaniu (na zdarzeniu onload) go pokazuj.

Coś z tą biblioteką nie tak. Konsola błędów wywala komunikat "$.isWindow is not a function" i wywala całego javascripta.

version added: 1.4.3

• jQuery aktualne jest?
• nie uzywasz innych frameworków?
• nie masz nawalone skryptów z internetu, które gryzą się między sobą?

może z któregoś z tych powodów nie działa Ci także lazyload?

Fakt, to była wina nieaktualnej wersji jQuery. Wielkie dzięki za pomoc.

Witam!

Odkopuje trochę temat. Mam problem z lazyload na swojej stronie, który nie działa mi wcale (nie wiem z jakich przyczyn). Macie może jakiś pomysł na podobny efekt? Mogę wkleić kod ( w zasadzie taki sam jak tu//www.appelsiini.net/projects/lazyload) jeśli jest to potrzebne. Nie jestem bardzo zaawansowanym użytkownikiem jquery, więc w sumie mogłem popełnić jakiś szkolny błąd... aha i czy skrypty mogą się w jakiś sposób gryźć między sobą? może to jest przyczyna, bo mam ich tam kilka?

Byłbym bardzo wdzięczny za pomoc.

Najlepiej podaj link do całej strony. Jak najmniejszej, ale pełnej, tzn. minimalnej, która demonstruje niepożądany efekt.

Jeśli nie masz linka, to wrzuć całą paczkę wraz z obrazkami i skryptami -- po rozpakowaniu ma od razu działać (tzn. nie działać jak należy).

Chodzi generalnie o to, by jak najprościej odpalić to, co Ty masz. Przyczyn błędu może być wiele. Może nie masz klasy lazy przy obrazku (nie musisz jej mieć, ale selektor musi pasować do obrazków), może masz zwalony link do skryptu i ten w ogóle się nie ładuje...

Jest mało prawdopodobne, by skrypty "gryzły" się ze sobą, o ile są jakoś sensownie napisane. Sam fakt dodania nawet i dwudziestu skryptów do strony o niczym nie świadczy i niczego złego sam z siebie nie powoduje.

www.webmontownia.pl/index.html - cała strona, lazyload wrzucony tylko w indexie. w zasadzie mógłbym z tego efektu zrezygnować, ale denerwuje mnie, że nie działa. trudne życie grafika, który bawi się w kodowanie. :)

Uncaught exception: ReferenceError: Undefined variable: jQuery
Uncaught exception: TypeError: '$("img.lazy").lazyload' is not a function

w kodzie:

<script type='text/javascript' src='js/queryLoader.js'></script>
<script type='text/javascript' src="js/jquery.lazyload.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

Czyli tak, najpierw ładujesz skrypty do jQuery (które wymagają istnienia jQuery w momencie ładowania), potem samo jQuery W DWÓCH WERSJACH?

Wrzuć nowszego jQuery jako pierwszy ładowany skrypt, starszego wywal, Twoje własne skrypty inicjujące różne rzeczy (zakładam, że to "scripts.js" - nie zaglądałem) wrzucaj na "sam dół" (w sensie - w <head>, tam gdzie ładujesz skrypty).

jQuery 1.7.1 wiesza mi queryLoadera. Użyłem 1.5.2, przeniosłem adres jQuery wyżej, i <script>$("img.lazy").lazyload();</script> dałem na sam dół. Podziałało dziwnym sposobem :) Dzieki wielkie

Podziałało dziwnym sposobem

To jest tak samo normalne jak to, że najpierw bierzesz do ręki długopis, a potem zaczynasz pisać (a nie odwrotnie albo w dowolnej kolejności)