Ускорение загрузки 30-40 динамически загружаемых изображений на каждом просмотре страницы

Question

У меня социальное сообщество с большим трафиком. В правом столбце макета сайта мы получили «онлайн-список», который распечатывает миниатюрные фотографии 40x40px друзей, людей в вашем районе и т.д., всего 30-40 изображений.

Непосредственно перед загрузкой правого столбца он зависает при загрузке всех этих изображений. Мне нужно более быстрое решение, совместимое вплоть до IE6.

Можно ли загружать изображения с помощью ajax после загрузки страницы, использовать какой-либо встроенный gfx (поддерживаемый IE6) или другие методы?

Answer 1

Загрузка изображений через AJAX будет работать. Вы можете легко сделать это, например, с помощью jQuery. Определите div для каждого изображения, которое вы хотите отобразить. Возможно, вы могли бы отобразить изображение «Идет загрузка» или что-то подобное вместо реального изображения, когда страница первоначально отображается.

Есть много вариантов с jQuery. Существует плагин для отложенной загрузки , вы можете предварительно загружать изображения и легко добавлять эффекты при отображении изображения.

Answer 2

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

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

псевдокод:

1. пользователь запрашивает изображение
2. проверить, существует ли миниатюра этого изображения
3. если нет, создайте миниатюру и подайте ее
4. если да, подать миниатюру

Вы можете заставить сервер кэшировать эти изображения, используя переписывание apache для маршрутизации определенных запросов .jpg | .png | и т. Д. В ваш скрипт изменения размера. Другие серверы, несомненно, имеют аналогичные функции.

Answer 3

Да, вы можете отложить загрузку изображений, хотя вы можете включить обычную HTML-версию в тег <noscript>, чтобы простые пользовательские агенты / пауки могли видеть вашу страницу.

Другой способ - загрузить изображения из нескольких поддоменов, поскольку браузеры обычно открывают только небольшое количество подключений к каждому домену. Например, если ваш сайт находится на foo.com, загрузите ваши статические изображения с a.foo.com, b.foo.com и c.foo.com

Answer 4

Я бы также рекомендовал не показывать 30-40 динамических изображений, поскольку ни сервер, ни клиент не могут эффективно кэшировать эти изображения.

Answer 5

Сделать эту область страницы асинхронной загрузки в фоновом режиме.