Лучшая практика для загрузки большой галереи изображений

Question

У меня неожиданно большая галерея из 130 изображений.Первоначально мой подход заключался в том, чтобы исчезнуть в галерее на $(window).load();

Очевидно, что это смешно для 130 файлов ... И действительно, никто не хочет иметь дело с таким количеством запросов http.

Такэто мой «субъективный вопрос, который, скорее всего, будет закрыт».

Я неохотно думаю, что, возможно, мне нужно загрузить только около 20 изображений, а затем больше ajax-in по мере продвижения пользователя в галерее.Но это неизведанное и пугающее звучание.

Спасибо за ваш совет!

Answer 1

Первоначально загрузите несколько изображений, затем используйте предварительный загрузчик для других изображений.

Обычная галерея jquery выглядит так: http://www.twospy.com/galleriffic/

Если вы хотите построить решение вручную, вы можете использоватьпрелоадер: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 2

Это субъективный вопрос, однако, основным ответом является загрузка изображений после загрузки страницы, поэтому вы не блокируете страницу.

Вы также должны использовать эскизы. Я видел множество самодельных галерей, которые просто сжимают исходную картинку до миниатюры при загрузке ... Это нехорошо;) Если вы не хотите идти по пути следующей / предыдущей страницы, вы можете просто загрузить миниатюры в 5/6/7-бесконечной сетке, и загружайте изображения только в видимых заполнителях.

1. Загрузить страницу
2. Создание заполнителей для каждой картинки
3. Загрузка изображений для видимых заполнителей
4. Когда пользователь прокручивает страницу вниз, загружает изображения для заполнителей, которые входят в область просмотра.

Или что-то;)

Answer 3

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

Я предлагаю загрузить только 3-5 изображений и добавить событие для кнопки «Далее», чтобы загрузить больше.Найдите файл jquery.lazyload.js и попытайтесь интегрировать его на свою страницу.

Answer 4

Было бы неплохо загружать возраст I, только когда он требуется пользователю, либо показывать только 10–20 за раз со ссылкой «Просмотреть больше» или «Следующая страница» где-то на вашей странице. Еще один способ сделать это - загрузить изображения, когда пользователь прокручивает вашу страницу вниз! Используя метод scroll (), описанный здесь: http://api.jquery.com/scroll/

Я хотел бы перейти на отдельные страницы, на которых вы используете jQuery для загрузки следующего набора изображений, когда пользователь нажимает различные ссылки.