Настало время для очередного опыта. Сегодня в полевых испытаниях будем проверять на прочность Blogger при помощи тяжёлой галереи на jQuery.
Плагин-галерея называется FancyBox и представляет собой кучку небрежно разбросанных на странице фотографий. Каждый элемент, будь то снимок или любая картинка, можно брать мышью и перемещать в пределах, позволенных областью.
Галерея неудачна тем, что содержит много графических элементов, вдобавок, работает с тремя джаваскриптами.
Показатели производительности блога будем снимать при помощи этого сервиса. В основе измерений будет лежать скорость загрузки страницы. С помощью этого online измерителя можно получить все данные о подгружаемых элементах.
На момент написания статьи главная страница моего блога грузится со скоростью:
Так... исходные данные определили, возьмёмся за галерею. Она использует jQuery, поэтому эта библиотека должна уже присутствовать в блоге. Установка скриптов со стилями в Blogger расписана здесь.
Качаем архив на странице разработчика и смотрим содержимое:
В папке css лежит таблица стилей для странички index.html (демо). В fancybox находятся графические элементы - кнопочки, полоски, тень, а также таблица стилей jquery.fancybox-1.2.6.css и скрипт jquery.fancybox-1.2.6.pack.js. Папка images содержит набор фотографий курортов для демо. В папке js три скрипта - jquery-animate-css-rotate-scale.js, jquery-css-transform.js и main.js.
Первая задача - положить все картинки (в количестве 15 штук) из папки fancybox на внешний хостинг (пикассу) и прописать их в файл jquery.fancybox-1.2.6.css. Я уже это сделал, можете воспользоваться моим файлом.
Всё это добро, вместе взятым образом, должно быть прописано вот так:
<link rel="stylesheet" type="text/css" href="http://хостинг/fancybox/jquery.fancybox-1.2.6.css" /> <script type="text/javascript" src="http://хостинг/fancybox/jquery-css-transform.js"></script> <script type="text/javascript" src="http://хостинг/fancybox/jquery-animate-css-rotate-scale.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://хостинг/fancybox/jquery.fancybox-1.2.6.pack.js"></script> <script type="text/javascript" src="http://хостинг/fancybox/main.js"></script>
Дополнительные стили можно оставить на странице для быстрой настройки (или скопировать в предыдущий файл jquery.fancybox-1.2.6.css):
<style> #gallery { height:600px; position:relative; width:100%; } #gallery div,#gallery div a { height:128px; overflow:hidden; width:192px; } #gallery div { background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border:2px solid #000; left:250px; padding:5px; position:absolute; top:200px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -moz-box-shadow:3px 3px 4px #444; -webkit-box-shadow:3px 3px 4px #444; box-shadow:3px 3px 4px #444; } #gallery div a { display:block; text-indent:-1000px; } </style>
Html код для вставки на страницу выглядит так:
<div id="gallery"> <div id="1" style="background-image:url(http://3.bp.blogspot.com/-mg8oJ2DreKI/TqO7nuD4XoI/AAAAAAAAGf0/xJVNVJjgOH4/s1600/apple.png)"> <a class="fancybox" href="http://1.bp.blogspot.com/-p0exNkpyXPI/TqO7oPH2DiI/AAAAAAAAGf4/EbM2jDLBGX4/s1600/apple256.png" target="_blank">photo 1</a> </div> <div id="2" style="background-image:url(http://1.bp.blogspot.com/-h-FxQzSeWG8/TqO7ojiILNI/AAAAAAAAGgA/9G6KAlEEpFk/s1600/cake.png)"> <a class="fancybox" href="http://1.bp.blogspot.com/-hV0EyM960GU/TqO7pp3J92I/AAAAAAAAGgI/Lg8cu3KPkoc/s1600/cake256.png" target="_blank">photo 2</a> </div> <div id="3" style="background-image:url(http://2.bp.blogspot.com/-c4IxL90jRzc/TqO7qHsOTCI/AAAAAAAAGgU/T5MMm8RXdiw/s1600/chicken.png)"> <a class="fancybox" href="http://4.bp.blogspot.com/-QDQWTX3W11Q/TqO7rixJHbI/AAAAAAAAGgY/Y4fCZgFE1Aw/s1600/chicken256.png" target="_blank">photo 3</a> </div> <div id="4" style="background-image:url(http://2.bp.blogspot.com/-fzolllhUfFg/TqO7sOhguxI/AAAAAAAAGgk/oxzEvTLg2Ss/s1600/crawfish.png)"> <a class="fancybox" href="http://4.bp.blogspot.com/-UKNhaL0Sl2A/TqO7tHVjy8I/AAAAAAAAGgo/RdNmg4ZXPIM/s1600/crawfish256.png" target="_blank">photo 4</a> </div> <div id="5" style="background-image:url(http://2.bp.blogspot.com/-v8V6t8mihNA/TqO7tlUGO0I/AAAAAAAAGgw/51rwItT0JOM/s1600/sandwich.png)"> <a class="fancybox" href="http://4.bp.blogspot.com/-3itcFigZupU/TqO7uR1A9OI/AAAAAAAAGg4/V9sN96b892w/s1600/sandwich256.png" target="_blank">photo 5</a> </div> </div>
Специфика правильной установки картинки такая:
в каждой строке контейнера прописывается путь к маленькой картинке (style="background-image:url) и к полноразмерной (a class="fancybox" href=).
Как и обещал, завершаю заметку измерением скорости загрузки страницы (ссылку на сервис давал выше) с установленной галерей:
Прекрасный результат, браво Blogger! Какой ещё другой движок бесплатно так хорошо справится?
PS:
И небольшое сравнение скорости работы этой страницы, точнее галереи FancyBox (определял визуально), в трёх браузерах из-под Windows (машина: двуядерный турион, засранная виндоус "семёрка"):
Firefox 7.01 - средне, тормозит
Opera 11.52 - плохо, почти пошагово
Chrome 14.0.835.202 - нормально
а можно ссылку на пример использования этой галереи?
ОтветитьУдалитьНа этой странице картинки с яблоком, курей и раком и хотдогом можно произвольно перемещать.
ОтветитьУдалитьГалерея бестолковая, но интересная.