Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Slider: ładowanie zdjęć po kolei, a nie wszystkie jednocześnie.
1q2w3e4r
post 6.06.2012, 17:47:22
Post #1





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Mam taki skrypt slidera, który dobrze działa. Jednak gdy dodam wielkie zdjęcia wszystkie ładują się jednocześnie co opóźnia załadowanie strony. Potrzebuję zrobić tak, aby zdjęcie ładowało się dopiero wtedy gdy ma być wczytane jako kolejne.
Jeśli to możliwe, można dodać w przypadku ładowania .gif loadera, lub po prostu napis "ładuję kolejne zdjęcie".
Bardzo proszę o pomoc.

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul.ppt {
  5. position: relative;
  6. }
  7. .ppt li {
  8. list-style-type: none;
  9. position: absolute;
  10. top: 28;
  11. }
  12. .ppt img {
  13. border: 1px solid #e7e7e7;
  14. padding: 5px;
  15. background-color: #ececec;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <ul class="ppt">
  21.     <li>
  22.             <li><img width="600px" src="http://www.inf.sgsp.edu.pl/pub/MALUNKI_DUZE/ROZNE_DUZE/zaba.png" /></li>
  23.             <li><img width="600px" src="http://3.bp.blogspot.com/-m05y8KEjvEc/TreulpsJLZI/AAAAAAAAC0s/40G9IqU9aAA/s1600/kopanska_scent_fragrance.jpg" /></li>
  24.             <li><img width="600px" src="http://us.123rf.com/400wm/400/400/alexanderd/alexanderd0810/alexanderd081000010/3735716-duze-zdjecie-fioletowy-kwiat-w-lesie-jesienia.jpg" /></li>
  25.             <li><img width="600px" src="http://us.123rf.com/400wm/400/400/rustyphil/rustyphil0801/rustyphil080100219/2438437-duze-streszczenie-obraz-energii-elektrycznej-lub-blyskawica.jpg" /></li>
  26.             <li><img width="600px" src="http://www.inf.sgsp.edu.pl/pub/MALUNKI_DUZE/PLD_DUZE/iso.png" /></li>
  27.             <li><img width="600px" src="http://2.bp.blogspot.com/_sbh4hXqCzVs/TBfqUxfloAI/AAAAAAAADBg/GeC1HZc0KnM/s1600/P1060030.JPG" /></li>
  28.     </li>
  29. </ul>
  30.  
  31. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  32. <script type="text/javascript">
  33. $('.ppt li:gt(0)').hide();
  34. $('.ppt li:last').addClass('last');
  35. var cur = $('.ppt li:first');
  36.  
  37. function animate() {
  38. cur.fadeOut( 1000 );
  39. if ( cur.attr('class') == 'last' )
  40. cur = $('.ppt li:first');
  41. else
  42. cur = cur.next();
  43. cur.fadeIn( 1000 );
  44. }
  45.  
  46.  
  47. $(function() {
  48. setInterval( "animate()", 4000 );
  49. } );
  50. </script>
  51.  
  52. </body>
  53. </html>
[PHP] pobierz, plaintext


Wrzucam jeszcze demo:
http://xdd.pl/slider/slider_test.html

Edit: pomoże mi ktoś?

Edit2:
Potrzebuję coś na wzór:
http://www.gruppo4.com/~tobia/cross-slide.shtml
Tylko, żeby zdjęcia ładował na bieżąco, a nie jak ten ładuje na początku co długo trwa przy np. 30zdjęciach.
Go to the top of the page
+Quote Post
toffiak
post 6.06.2012, 18:41:36
Post #2





Grupa: Zarejestrowani
Postów: 395
Pomógł: 80
Dołączył: 24.08.2009

Ostrzeżenie: (0%)
-----

Z podanych pluginów nigdy nie korzystałem więc nie wiem czy udostępniają wymaganą funkconalność za to ten napewno http://jquery.malsup.com/cycle/

A tutaj przykładowe dema które służą do ładowania obrazków po kolei:
http://jquery.malsup.com/cycle/add.html?v2
http://jquery.malsup.com/cycle/add2.html


--------------------
Predefiniowane interfejsy w PHP | PDO Tutorial
Go to the top of the page
+Quote Post
1q2w3e4r
post 6.06.2012, 18:56:44
Post #3





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Dziękuję za propozycje. Sprawdzałem już ten, który podałeś.
Ładuje niestety wszystkie zdjęcia jednocześnie co opóźnia załadowanie całej strony. Wczytanie 30 zdjęć jednocześnie o szerokości 600px to na wolnych łączach może być problem, u mnie też on występuje chociaż nie mam takiego wolnego neta. Na pewno zdjęcia nie mogą być normalnie w kodzie źródłowym tylko wczytywane po stronie js.
Go to the top of the page
+Quote Post
krowal
post 7.06.2012, 07:37:55
Post #4





Grupa: Zarejestrowani
Postów: 561
Pomógł: 72
Dołączył: 15.11.2006

Ostrzeżenie: (0%)
-----

Proponuję znaleźć slider umożliwiający dodawanie elementów w trakcie działania. Wtedy masz już z górki. Tworzysz listę adresów obrazków, które mają być w sliderze. Na początku w kodzie ładujesz tylko pierwszy z listy. Później przed przesunięciem do kolejnego obrazka ładujesz go z listy obrazów i wklejasz na listę za pomocą ww. funkcjonalności. Robisz tak aż do wyczerpania listy. A potem już leci po kolei.


--------------------
Nawet świnka może wejść na drzewo kiedy jest chwalona :)
Go to the top of the page
+Quote Post
1q2w3e4r
post 7.06.2012, 17:32:30
Post #5





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Problem w tym, że nie mogę takiego znaleźć smile.gif Pomożesz?
Go to the top of the page
+Quote Post
krowal
post 9.06.2012, 11:00:13
Post #6





Grupa: Zarejestrowani
Postów: 561
Pomógł: 72
Dołączył: 15.11.2006

Ostrzeżenie: (0%)
-----

Jasne, że pomogę, od tego jest przecież to forum, wpisz w google: "jquery carousel" lub "jquery slider" potem szukaj w dokumentacjach znalezionych skryptów ww. funkcjonalności wink.gif


--------------------
Nawet świnka może wejść na drzewo kiedy jest chwalona :)
Go to the top of the page
+Quote Post
axweb
post 9.06.2012, 16:26:04
Post #7





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 17.05.2012

Ostrzeżenie: (0%)
-----

Ja to bym przyspieszył Ajaxem. By nie było takich problemów i byś miał większe pole manewru,
Go to the top of the page
+Quote Post
krowal
post 10.06.2012, 07:01:29
Post #8





Grupa: Zarejestrowani
Postów: 561
Pomógł: 72
Dołączył: 15.11.2006

Ostrzeżenie: (0%)
-----

Po pierwsze ajaxem byś nie przyspieszył tylko spowolnił. Po drugie problem nadal będzie bo jego rozwiązaniem nie jest zmiana sposobu pozyskiwania danych. Po trzecie... w jaki sposób "zwiększy się pole manewru" ? smile.gif


--------------------
Nawet świnka może wejść na drzewo kiedy jest chwalona :)
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.07.2025 - 02:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn