Оптимизировать предварительную загрузку изображений в javascript

Question

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

Я портирую приложение Flash в html / css, пытаясь воссоздать пользовательский интерфейс как можно ближе к исходному сайту. По сути, это приложение для просмотра фотографий, где изображение высокого разрешения показывается, когда пользователь наводит курсор на ссылку. На странице около 50-80 таких изображений.

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

Кроме того, я просматриваю значительное время загрузки для каждой страницы даже после того, как изображения были кэшированы, потому что странице все еще нужно связаться с сервером для каждого изображения, чтобы получить код 304 Not Modified.

У кого-нибудь есть предложения по ускорению этого процесса? Имеет ли смысл попытаться создать один огромный спрайт изображений, который загружается за один запрос, а не 50-80 небольших изображений, каждое из которых принимает один запрос? Целью здесь является достижение времени загрузки, аналогичного Flash-сайту.

Спасибо. Я знаю, что это не идеальный способ сделать что-то.

Answer 1

Как вы указали, одним из наиболее распространенных факторов, влияющих на время загрузки современных веб-страниц, является огромное количество небольших изображений, отправляемых между клиентом и сервером. Некоторые недавние исследования показывают, что для более чем 20 изображений 80% вашего времени загрузки будет потрачено в латентном режиме при выполнении этих многочисленных операций, а не при загрузке!

Инструмент под названием SmartSprites - это очень удобный способ «скомпилировать» одно большое изображение из множества ваших маленьких изображений, что обеспечит гораздо более быструю загрузку и предварительную выборку изображений. Вот ссылка http://smartsprites.osinski.name/

Answer 2

Использование спрайта хорошо, если вы согласны с этим решением. Кроме того, я постараюсь обнаружить поддержку данных URI в этом браузере и заставить скрипт загружать различные таблицы стилей на основе этой информации. Одни таблицы стилей с базовыми 64 кодированными URI данных, а другие с реальным URL-адресом спрайта. Файл CSS также кешируется.

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

Answer 3

Я бы сказал, что использование CSS-спрайтов очень важно. Объединение всех ваших изображений или изображений аналогичного характера в одном HTTP-запросе действительно помогает увеличить время загрузки. Загрузка 10 изображений с общим размером файла 100 КБ будет медленнее, чем загрузка 1 изображения того же размера. Это также помогает изображениям падать раньше, чем они требуются в случае наведения и наведения мыши на события, и они обычно делают вещи намного более плавными.

Вот статья о них.

Answer 4

Использование Спрайт Me . И не пропустите блог сообщений о создании этого инструмента.

Answer 5

Если вам не нужны все изображения сразу, вы можете использовать функцию window.timeout (), чтобы выполнить часть работы после инициализации страницы.

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