Долгая загрузка страницы из-за большого слайдера
Сделан слайдер видео-роликов, в котором аж 50 видео. Естественно, страница очень долго грузится. Нужно ускорить прогрузку страницы. Варианты "сократить количество слайдов"/"убрать слайдер" начальство отвергает. Штатный программист отказывается решать проблему. Я сам не программист и как поправить дело не знаю.
Вот код слайдера (пример):
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .java.geshi_code {font-family:monospace;} .java.geshi_code .imp {font-weight: bold; color: red;} .java.geshi_code .kw1 {color: #000000; font-weight: bold;} .java.geshi_code .kw2 {color: #000066; font-weight: bold;} .java.geshi_code .kw3 {color: #003399;} .java.geshi_code .kw4 {color: #000066; font-weight: bold;} .java.geshi_code .co1 {color: #666666; font-style: italic;} .java.geshi_code .co2 {color: #006699;} .java.geshi_code .co3 {color: #008000; font-style: italic; font-weight: bold;} .java.geshi_code .coMULTI {color: #666666; font-style: italic;} .java.geshi_code .es0 {color: #000099; font-weight: bold;} .java.geshi_code .br0 {color: #009900;} .java.geshi_code .sy0 {color: #339933;} .java.geshi_code .st0 {color: #0000ff;} .java.geshi_code .nu0 {color: #cc66cc;} .java.geshi_code .me1 {color: #006633;} .java.geshi_code .me2 {color: #006633;} .java.geshi_code span.xtra { display:block; }
<script src="/bitrix/templates/mgppu/js/slider/jquery.min.js"></script>
<script src="/bitrix/templates/mgppu/js/slider/swfobject.js"></script>
<link href="/bitrix/templates/mgppu/js/slider/anythingslider.css" rel="stylesheet"></link> <link rel="stylesheet" href="/bitrix/templates/mgppu/js/slider/theme-minimalist-round.css"></link>
<script src="/bitrix/templates/mgppu/js/slider/jquery.anythingslider.js"></script>
<script src="/bitrix/templates/mgppu/js/slider/jquery.anythingslider.video.js"></script>
<script>
$(function(){
$('#slider').anythingSlider({
theme : 'minimalist-round',
width : 450,
height : 340,
autoPlay : true,
resizeContents : false,
addWmodeToObject : 'transparent',
buildNavigation : false
});
});
</script>
<!--[if lte IE 7]>
<link rel="stylesheet" href="/bitrix/templates/mgppu/js/slider/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<ul id="slider">
<!-- Vimeo: iframe -->
<li><iframe width="450" height="340" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/0krUT5ikdYI"></iframe>
</li>
<li><iframe width="450" height="340" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/zXlb1adG__I"></iframe>
</li>
<li><iframe width="450" height="340" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/ufwsdJOpTws"></iframe>
</li>
<li><iframe width="450" height="340" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/kBoIcBlCL9M"></iframe>
</li>
<li><iframe width="450" height="340" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/nLCzGZfbKgM"></iframe>
</li>
</ul>
<!-- END AnythingSlider -->
Где-то прочитал, что можно сделать так, чтобы при загрузке страницы прогружались только первые 3 слайда, остальные по мере прокрутки слайдера. Собственно, вопрос - как?
1 ответов
Еще бы он не тормозил. вы пытаетесь 5 видеороликов заэмбеддить в слайдер!
Тут либо предварительная подгрузка (до момента отображения самого слайдера), либо сладйер инициирует ролик в момент отображения слайда (ajax).
Предварительная подгрузка очевидно, что будет делать непреемлемую задежку в отображении сладера делать, но вы пытаетесь показать 5 роликов сразу что ли?
Любой ролик прежде всего создает объект плейера, который в свою очередь тянется с удаленного хоста.
Еще решение - создайте своей видео-плейер, который будет использовать по "инстансу" на каждый кадр слайдера.
Последние автомобильные новости , тест-драйвы, фото:авто, авто и девушки и девушек, видео:авто,дрифт,обзоры,об авто,программы об авто,теле программы и с девушками , новинки авто , фото на рабочий стол, фото хорошего качества , hd качества и многое другое - http://avtodev.ru/