Оптимизация предварительной загрузки изображений javascript
Интересно, есть ли у кого-нибудь стратегии оптимизации предварительной загрузки изображений с помощью javascript?
Я портирую Flash-приложение в html / css, пытаясь воссоздать пользовательский интерфейс как можно ближе к исходному сайту. Это, по сути, приложение для просмотра фотографий, где изображение в высоком разрешении отображается, когда пользователь наводит курсор на ссылку. На странице примерно 50-80 таких изображений.
Предварительная загрузка всех изображений по отдельности создает время загрузки значительно больше, чем это из флэш-приложения. Объем данных тот же, но я должен предположить, что более длительное время загрузки связано с количеством циклов, которые должны быть сделаны на сервер для каждого изображения.
Кроме того, я смотрю на значительное время загрузки для каждой страницы даже после того, как изображения были кэшированы, потому что страница все еще должна связаться с сервером для каждого изображения, чтобы получить 304 не измененный код.
Есть ли у кого-нибудь предложения по ускорению этого процесса? Есть ли в этом смысл? возможно, попробовать создать один огромный спрайт изображений, который загружается в одном запросе, а не 50-80 небольших изображений, каждое из которых принимает один запрос? Цель здесь заключается в достижении аналогичного времени загрузки для Flash-сайта.
Спасибо. Я знаю, что это не кажется идеальным способом сделать что-то.
5 ответов:
Как вы уже отмечали, одним из наиболее распространенных факторов, влияющих на время загрузки современных веб-страниц, является огромное количество небольших изображений, передаваемых между клиентом и сервером. Некоторые недавние исследования показывают, что для более чем 20 изображений 80% вашего времени загрузки будет потрачено на латентность выполнения этих многих gets, а не на фактическую загрузку!
Инструмент под названием SmartSprites-это очень удобный способ "скомпилировать" одно большое изображение из всех ваших многочисленных маленьких изображений, которые будет выполняться как гораздо более быстрое время загрузки, так и предварительная выборка изображений. Вот эта ссылка http://smartsprites.osinski.name/
Я бы сказал, что использование CSS-спрайтов является большим. Наличие всех ваших изображений или изображений аналогичной природы на одном HTTP-запросе действительно помогает загрузить время. Загрузка 10 изображений с общим размером файла 100 Кб будет медленнее, чем загрузка 1 изображения того же размера. Это также помогает изображениям опускаться, прежде чем они потребуются в случае наведения курсора мыши на события, и они обычно делают вещи намного более гладкими.
Использование спрайта хорошо, если вы согласны с этим решением. Кроме того, я бы попытался обнаружить поддержку data URI в этом браузере и заставить скрипт загружать различные таблицы стилей, основанные на этой информации. Одна таблица стилей содержит кодированные URI данных base 64, а другая-реальный URL-адрес спрайта. Файл CSS также можно кэшировать.
Вот метод для обнаружения поддержки URI данных или вы можете использовать условные комментарии IE или... существуют некоторые обходные пути для отправки IE в кодировке строки изображений , в составных HTTP-ответах.
Если вам не нужны все изображения сразу, вы можете использовать окно.тайм-аут (функция), чтобы сделать некоторые работы после того, как страница инициализируется.
Кроме того, если вы используете одно изображение в нескольких местах, вы можете избежать нескольких вызовов на сервер, поместив изображение в стиль CSS и повторно используя этот стиль вместо изображения.
Comments