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

0

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.

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

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

0

Przecież tu nie ma żadnej kontroli ładowania zdjęć.
Musiałbyś domyślnie ukryć wszystkie zdjęcia, aby przeglądarka ich nie ładowała, i potem pokazywać dopiero gdy są potrzebne (czyli dopisanie do .ppt img display: none, a przed cur.fadeIn() zrobić cur.children('img').show() - powinno zadziałać). Jeżeli natomiast chcesz, żeby zdjęcie władowało się w całości zanim zostanie pokazane to już musisz poszukać/napisać skrypt do preloadowania, ale to będzie znacznie trudniejsze, szczególnie, że zdaje się, że operujesz tylko i wyłącznie na gotowcach.
A mi się pisać całości dla Ciebie nie chce.

Swoją drogą, atrybut width w elemencie img nie powinien mieć jednostki - wartość tam jest ZAWSZE w pikselach.

A całość choć prosta, to pisana przez kogoś nieszczególnie przejmującego się tym, co robi, co widać po wywołaniu setInterval i fakcie, że to nie jest jakiś plugin tylko zbiór funkcji, które w najgorszym przypadku mogą się gryźć z innymi.

Może po prostu poszukaj czegoś innego? Masz jeszcze jakieś siedem tysięcy innych sliderów pod jQuery do sprawdzenia, na pewno jest taki, który odpowiada Twoim potrzebom.

0

Niestety ten sposób, który podałeś nie działa. Przeglądarki mino display: none; wczytują wszystkie zdjęcia. Najnowszy chrome, firefox, opera.

0

No to jak mówię - szukaj innego slidera - tyle ich jest, że nie ma potrzeby wynajdywać koła od nowa, albo poucz się JS i napisz coś własnego (chyba, że Ci ktoś sklei gotowca)

0

Wybrałem tego, bo wydawał się najodpowiedniejszy. Po wdrożeniu wchodzę na Firefox i nie działa.. Wcześniej sprawdzałem na Chrome i Operze i działał idealnie.
http://tobia.github.com/CrossSlide/

A najlepszy to by był taki, który ładuje zdjęcia na bieżąco. Bo ten co wyżej podałem ładuje wszystkie jednocześnie.
Jest pełno tych sliderów ale nie ma takiego, o którym piszę. Na pewno da się tak zrobić bo mam tooltip, który ładuje zdjęcie tylko wtedy gdy się na niego najedzie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1