Показать сообщение отдельно
  #1 (permalink)  
Старый 22.01.2013, 04:48
Новичок на форуме
Отправить личное сообщение для nukacoal Посмотреть профиль Найти все сообщения от nukacoal
 
Регистрация: 16.12.2012
Сообщений: 5

Подгрузка избражений
Здравствуйте! Код, который представлен ниже, выводит изображения при наведении курсора. Но к сожалению у меня слишком много изображений(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>
Ответить с цитированием