Постоянный участник
Покинул форум
Сообщений всего: 2122
Дата рег-ции: Июнь 2010
Помог: 50 раз(а)
|
Типичная проблема:
В простом и традиционном варианте слайдеры и иные галереи обычно подгружают демонстрируемые картинки при загрузке страницы, визуализируя конструкции примерно такого вида:
Однако, довольно часто требуется показать в одном слайдере множество изображений или несколько (например 15) подобных слайдеров на одной странице, к примеру, странице товаров или рубрики объявлений с галереями фотографий-превьюшек.
Использовать для этих целей подобный подход с изначальным выводом всех картинок в html нельзя (иначе пользователю разом будут подгружаться десятки фотографий что отразится на времени загрузки страницы)
Часть слайдеров (в основном платные) имеют встроенный функционал для "ленивой загрузки" картинок. Для других пользователи часто пытаются изобретать велосипеды, связывая слайдеры с плагинами а ля Jquery Lazy Load.
Некоторые вообще пытаются для данной задачи задействовать ajax (именно для подгрузки картинок, что, для большинства задач, просто не требуется).
При этом коммерческие слайдеры со встроенным функционалам для данной задачи просто неприлично "тяжелые" благодаря своим сложным эффектам и куче настроек.
Между тем, решение задачи сводится к записи урлов картинок в массив js, и встраиванию его элементов в html-код, визуализируемый слайдером.
Предлагаю легкое и производительное (20 слайдеров на страницу с указанной рукописной обвязкой работают как часы) решение, основанное на легком, общеизвестном плагине jquery cyrcle:
CODE ( javascript):
скопировать код в буфер обмена
$(document).ready( function() { // массив изображений var slides = [ '<img alt="" src="/img/slide1.jpg" />', '<img alt="" src="/img/slide2.jpg" />', '<img alt="" src="/img/slide4.jpg" />', ]; // колбэк-функции связаны с событиями в cycle, их задачи понятны из названия function onloadedSlide(){ $('#progressbar').hide(); $('.container-show').cycle('resume'); }; function preSlide(current, next, options, forward){ var img = $(next).find('img')[0]; if (slides[0] && options.addSlide) { options.addSlide(slides.pop()); }; }; function afterSlide(current, next, options, forward){ var img = $('.container-show').find('img')[options.nextSlide]; if (img.complete !=true) { $('.container-show').cycle('pause'); $('#progressbar').show(); loadingTimer = +new Date(); $(img).bind("load",onloadedSlide); }; if (slides[0] && options.addSlide) { options.addSlide(slides.pop()); }; }; $('#shownext').one('mouseenter',function(){ $('.container-show').append(slides.pop()).cycle({ fx: 'fade', pause:true, next:'#shownext', after:afterSlide, before:preSlide, autostopCount: slides.length+2, delay:4000 }); }); $('#shownext').mouseleave(function(){ $(this).addClass('paused') $('.container-show').cycle('pause'); }); $('#shownext').mouseenter(function(){ if($(this).hasClass('paused')){ $('.container-show').cycle('resume'); $(this).removeClass('paused'); } }); });
html:
CODE ( html):
скопировать код в буфер обмена
<a id="shownext"> <div id="progressbar" style="display:none">какой-нибудь .gif</div> <div class="container-show"> <img alt="" src="/img/slide5.png" /> </div> </a>
Собственно все.
Изначально юзеру загружается всего одна картинка.
При наведении курсора на изображение происходит подгрузка второго фото и иннициализация галереи (это можно изменить. В моем случае нужно было сразу показать эффект перехода к следующей фотке). Далее - подгрузка всех оставшихся картинок в браузер пользователя. В целях повышения производительности можно использовать метод destroy для убийства неактивных слайдеров, оставляя одну картинку. В моем случае метода pause оказалось достаточно.(Отредактировано автором: 01 Июля, 2013 - 22:57:30)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Описание: простая реалиазация, возможно будет полезна.
