Здравствуйте! Код, который представлен ниже, выводит изображения при наведении курсора. Но к сожалению у меня слишком много изображений(45) и поэтому страница очень долго прогружается. Я попробовал сделать preload, но к сожалению изображения грузятся хаотично и получилось неок, даже в условиях локального сервера все неповоротливо. Средний размер изображения - 15кб.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.preloadify.js" ></script>
<script type="text/javascript">
$(function(){
$("#gallery").preloadify({ imagedelay:500 });
$("#restart").click(function(e){
$("#gallery").preloadify({ imagedelay:500 }); e.preventDefault();
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$('.slides').cycle({
fx: 'none',
speed: 1,
timeout: 100
}).cycle("pause");
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').addClass('active').cycle('pause');
});
});
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block{
position: relative;
width: 285px;
height: 483px;
background: url(images/large/temp0.png);
}
a.link{
position:absolute;
height: 483px;
width: 285px;
display: block;
}
a.link:hover{
background: none;
}
a.link:active{
background: none;
}
.slides{
visibility:hidden;
background: none;
}
.slides.active{
visibility:visible;
background: none;
}
</style>
<div class="slideshow-block" id="slide">
<a class="link"></a>
<ul class="slides" style="margin:0 0 0 10px; " id="gallery">
<? $i=1; while ($i++<45) echo '<li><img src="/images/large/temp'.$i.'.png" width=285px height=483px align=left></li> '; ?>
</ul>
</div>
<script>
var div = document.getElementById("slide");
div.onmouseover = function(){
this.setAttribute("style","background:none;");
}
</script>
