Forum PHP.pl > Slider: ładowanie zdjęć po kolei, a nie wszystkie jednocześnie.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Slider: ładowanie zdjęć po kolei, a nie wszystkie jednocześnie.

Forum PHP.pl > Forum > Po stronie przeglądarki

1q2w3e4r

6.06.2012, 17:47:22

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 
<html>
<head>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 28;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>
</head>
<body>
<ul class="ppt">
    <li>
            <li><img width="600px" src="http://www.inf.sgsp.edu.pl/pub/MALUNKI_DUZE/ROZNE_DUZE/zaba.png" /></li>
            <li><img width="600px" src="http://3.bp.blogspot.com/-m05y8KEjvEc/TreulpsJLZI/AAAAAAAAC0s/40G9IqU9aAA/s1600/kopanska_scent_fragrance.jpg" /></li>
            <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>
            <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>
            <li><img width="600px" src="http://www.inf.sgsp.edu.pl/pub/MALUNKI_DUZE/PLD_DUZE/iso.png" /></li>
            <li><img width="600px" src="http://2.bp.blogspot.com/_sbh4hXqCzVs/TBfqUxfloAI/AAAAAAAADBg/GeC1HZc0KnM/s1600/P1060030.JPG" /></li>
    </li>
</ul>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
 
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
 
 
$(function() {
setInterval( "animate()", 4000 );
} );
</script>
 
</body>
</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.

toffiak

6.06.2012, 18:41:36

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

1q2w3e4r

6.06.2012, 18:56:44

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.

krowal

7.06.2012, 07:37:55

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.

1q2w3e4r

7.06.2012, 17:32:30

Problem w tym, że nie mogę takiego znaleźć

Pomożesz?

krowal

9.06.2012, 11:00:13

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

axweb

9.06.2012, 16:26:04

Ja to bym przyspieszył Ajaxem. By nie było takich problemów i byś miał większe pole manewru,

krowal

10.06.2012, 07:01:29

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" ?

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.