Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ładowanie obrazkow
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Rafiki
22.07.2010, 10:53:09
Witam.

Tworze galerie, niemam za duzo pojecia o JS.
Zalezy mi na tym aby uzyskac efekt ladowania sie zdjec.
Tzn zanim przegladarka zaladuje zdjecie bedzie wyswietlalo sie kolko z ladowaniem.
Potrzebuje to do portfolio, wiec na jeden stronie bedzie trzeba wczytac np: 5 obrazkow , zanim sie zaladuja powinien pokazywac sie gif z kolkiem.

Do tego musze podpiac jakiegos lightboxa, z tym nie ebdzie raczej problów.

Znalazłem cos takiego:
http://www.no-margin-for-errors.com/projects/prettyloader/

Ale nie wiem jak to wykorzystac aby loader pokazal sie przed wczytaniem zdjecia, oczywiscie w tym samym miejscu co dane zdjecie smile.gif

Proszę bardzo o pomoc.

Z góry bardzo dziękuje.
thek
22.07.2010, 13:38:43
Jeśli to jest ajax lub coś w oparciu o niego, to trzeba wstawić do kodu preloader i ma on tak długo wisieć, aż AJAX nie zwróci danych. Zazwyczaj związane jest to z readystate = 4 czy też statusem 200. Dopóki ich nie otrzymasz musisz wyświetlać. W przypadku jQuery jest to prostsze, gdyż tam masz kilka stanów zdefiniowanych. Jest OK, Error i parę innych, ale można też kombinować z .ajaxSend() lub .ajaxStart(), zwłaszcza ten ostatni jest często używany w tym celu.
vcrproszek
29.07.2010, 09:48:22
witam

myślę, że ten kawałek kodu jest rozwiązaniem twojego problemu
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. $(function () {
  4.   var img = new Image();
  5.   $(img)
  6.     .load(function () {   
  7.       $(this).css('display','none');
  8.       $('#kontener') 
  9.         .removeClass('loading')
  10.         .append(this);
  11.       $(this).fadeIn();
  12.     })
  13.     .error(function () {
  14.     })
  15.     .attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
  16. });
  17. </script>
  18. <style>
  19. #kontener {
  20.   border: 1px solid #ccc;
  21.   width: 500px;
  22.   height: 500px;
  23. }
  24. #kontener img{
  25.   width: 500px;
  26. }
  27. #kontener.loading {
  28.   background: url(images/spinner.gif) no-repeat center center;
  29. }
  30. </style>
  31.  
  32. </head>
  33. <body>
  34. <div id="kontener" class="loading"></div>
  35.  
  36. </body>
[HTML] pobierz, plaintext


w załączniku przesyłam paczkę z wszystkimi plikami
preload
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.