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