jCarousel Галерея изображений с миниатюрами - PullRequest
Новая
       4

jCarousel Галерея изображений с миниатюрами

0 голосов
/ 17 июля 2011

В настоящее время у меня есть галерея изображений с 30 - 40 изображениями. После загрузки страницы пользователь может визуально видеть загрузку изображений в течение довольно значительного промежутка времени (меньше, чем просто). Галерея использует jcarousel prev / next кнопки для навигации по изображениям и миниатюрам. Я ищу способы оптимизировать способ загрузки галереи или, по крайней мере, внешний вид загрузки галереи. Одна мысль у меня была ниже, но я хотел знать, что думают сообщества по переполнению стека о том, как лучше всего это решить.

  • Стоит ли загружать сначала изображения и эскизы, а затем изображения по запросу?

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 17 июля 2011

Мы реализовали это на нашем сайте, сделав следующее.

  1. Когда вы создаете карусель, не создавайте все изображения со значением src с изображениями
  2. Для первых четырех или пяти изображений есть изображения для атрибутов src
  3. для следующих всех изображений сохраните значение изображения в некотором пользовательском значении и задайте src в качестве другого фиктивного значения
  4. Как только вы нажмете далее в карусели, поменяйте местами значения src и ваши собственные переменные
  5. для загрузки вы можете показать символ загрузки по умолчанию
  6. С этим подходом можно улучшить производительность намного лучше

например, все ваши следующие изображения в вашей карусели должны выглядеть примерно так 

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" id="yourimage.jpg" class="carouselImage">

после нажатия поменяйте местами изображение src 

 $('yourimage').attr('src','yourimage');

после этого ваш код должен выглядеть следующим образом 

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" src="yourimage.jpg" class="carouselImage">
0 голосов
/ 17 июля 2011

Да, отложенная загрузка изображений - очень аккуратная техника для повышения производительности. Вы должны показать некоторые из них (в зависимости от размера). Тогда jCarousel может динамически загружать остальные изображения: 

jQuery('#mycarousel').jcarousel({
    itemLoadCallback: mycarousel_itemLoadCallback
});

Вы можете определить этот обратный вызов для загрузки новых изображений через JavaScript или через AJAX. Смотрите примеры: http://sorgalla.com/projects/jcarousel/#Examples

Также я знаю этот плагин http://www.appelsiini.net/projects/lazyload, который лениво загружает изображения при прокрутке, играя с атрибутами src, как предложил kobe. Он не подходит непосредственно для вашего случая, но исходный код даст вам лучшее представление о его реализации.

...