Загрузка слишком большого количества изображений замедляет мой сайт

Question

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

Answer 1

• Убедитесь, что вы добавили атрибуты width и height. На моей веб-странице, когда я их добавил, по какой-то причине он загружался немного быстрее в Safari и Chrome, но не имел значения в других браузерах.

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

• Убедитесь, что вы изменили размеры своих изображений до размера, который они будут отображаться на вашей веб-странице.

Answer 2

Ваш вопрос расплывчатый, это медленные изображения или полосы прокрутки?

Если изображения:

Никогда не изменяйте размеры изображений с помощью свойств css width height. Это загрузит все изображение и будет очень медленным. Вместо этого измените размер изображений перед их загрузкой или используйте генератор большого пальца для изменения размера при загрузке.

Если изображение маленькое (менее 100 пикселей по высоте или ширине), вы можете уменьшить его качество при создании большого пальца, чтобы размер файла был меньше, но это не оказало заметного влияния.

Используйте правильный формат файла. - GIF для анимации - PNG для небольших несущественных графики, таких как логотипы и значки - JPG для графики более высокого качества, как изображения

Вы загружаете контент перед отправкой на сервер?

Используйте CDN для своих изображений, например AWS S3, да, но НЕ ИСПОЛЬЗУЙТЕ flick / picassa, так как они будут «искать» ваше изображение перед его передачей, что будет намного медленнее. Использование только CDN (AWS S3) будет лучше, чем ваш текущий хостинг, поскольку они были оптимизированы для быстрого поиска, что сокращает время ожидания на 50-90% по сравнению с большинством веб-хостов.

Используйте только один CDN, после поиска DNS для домена ваш браузер будет его кэшировать.

Если ваш сайт использует файлы cookie или сеансы, храните изображения по другому URL-адресу (это может быть поддомен вашего сайта), чтобы файлы cookie и данные сеанса не отправлялись с каждым запросом изображения (замедляя его).

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

РЕДАКТИРОВАТЬ: Я также согласен, что загрузка изображений по требованию / видимости на веб-странице является очень хорошей практикой.

Если полосы прокрутки:

Используете ли вы пользовательские полосы прокрутки или пользовательское событие прокрутки? Если это так, вы можете установить пороговое значение (я рекомендую 100 мс) для частоты, с которой ваше событие изменения размера может быть запущено. Или вручную запустите событие изменения размера после загрузки изображений, как если бы в вашем сценарии вы знали, когда изображения были загружены.

Answer 3

• Убедитесь, что вы добавили атрибуты ширины / высоты в теги img - другие мудрый браузер / макет веб-сайта будет «прыгать» при загрузке.

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

Answer 4

Попробуйте лениво загружать изображения с помощью jQuery.Вот плагин: http://www.appelsiini.net/projects/lazyload

Вот пример, когда я использовал ленивую загрузку: https://www.lunatickets.co.uk (прокрутите страницу вниз и посмотрите изображения).

Также убедитесь, что браузер не меняет размеры ваших изображений!Убедитесь, что вы оптимизировали их для Интернета!

Answer 5

Вы пытались сохранить свои изображения на S3, Flickr или Picasso? Пусть их серверы примут удар по HTTP-запросам

Answer 6

Старайтесь не загружать все изображения одновременно.

Слайд-шоу, подобные этому: http://sandbox.scriptiny.com/slideshow/, они загружают только показанное изображение плюс некоторые из следующих.Галерея, которую я использовал в последний раз, загружала текущее изображение и следующие 10 изображений.Я не помню названия, но думаю, что это способ сделать это.