Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] galeria - ograniczenie liczby ładowanych miniatur
Forum PHP.pl > Forum > Przedszkole
wikiania
Witam,

zamieszczam na stronie galerię jquery jcarousel połączoną z Thickbox'em (adres skryptu http://sorgalla.com/jcarousel/). Mój problem jest taki, że mam do zamieszczenia 24 zdjęcia, widoczne są 4 zdjęcia naraz i z tym nie mam problemu, ale podczas otwarcia strony ładowane są wszystkie 24 -> chcę aby były załadowane jedynie 4 a podczas przejścia do kolejnej porcji następne 4 itd, ponieważ obecne ładowanie wszystkich zdjęć znacząco spowalnia mi stronę - czy ktoś mógłby udzielić mi rady czego poszukać, aby osiągnąć taki efekt jak napisałam?

Zamieszczam jeszcze fragment skryptu w którym ładowane są zdjęcia:

  1. var mycarousel_itemList = [
  2.  
  3. {url: "/images/zdjecia/01_s.png", title: "fot1"},
  4. ...
  5. ...
  6. {url: "/images/zdjecia/24_s.png", title: "fot24"}
  7. ];
  8.  
  9. var scroll = 4;
  10.  
  11. function mycarousel_itemLoadCallback(carousel, state)
  12.  
  13. {
  14. for (var i = carousel.first; i <= carousel.last; i++) {
  15. if (carousel.has(i)) {
  16. continue;
  17. }
  18.  
  19. if (i > mycarousel_itemList.length) {
  20. break;
  21. }
  22.  
  23. // Create an object from HTML
  24.  
  25. var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
  26.  
  27. // Apply thickbox
  28. tb_init(item);
  29. carousel.add(i, item);
  30. }
  31.  
  32. };
  33.  
  34. function mycarousel_getItemHTML(item)
  35.  
  36. {
  37. var url_m = item.url.replace(/_s.png/g, '_m.jpg');
  38. return '<a href="' + url_m + '" title="' + item.title + '" ><img src="' + item.url + '" width="194" height="343" border="0" alt="' + item.title + '" /></a>';
  39. };
  40.  
  41.  
  42. jQuery(document).ready(function() {
  43. jQuery('#mycarousel').jcarousel({
  44. size: mycarousel_itemList.length,
  45. scroll: 4,
  46. visible: 4,
  47. animation: 0,
  48. easing:'linear',
  49. size: 24,
  50. itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
  51. });
  52. });
  53.  
erix
Google: lazy load.
jasin
na stronie z tym skryptem masz przykład z AJAXem.

Po ściągnięciu biblioteki masz przykłady, zainteresuj się dynamic_ajax_php.php oraz dynamic_ajax_php.html tam powinno być wszystko czego potrzebujesz.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.