Как предварительно загружать изображения, чтобы они загружались быстрее повсюду на странице, и является ли это хорошей практикой?

Question

Вот в чем дело:У меня есть карта Google с множеством маркеров.

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

Моя идея состоит в том, чтобы «предварительно загрузить» их (не уверен, что это правильное слово), чтобы они появлялись почти одновременно с картой.

На данный момент я добавил те же изображения, которые использую на свою карту, за пределами карты, ранее на странице в display:none;

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

Это лучший способ сделать это и является ли это хорошей практикой?

Answer 1

Вы можете использовать «спрайты», т.е.коллекция отдельных изображений в одном png.Преимущество этого метода заключается в том, что требуется только 1 загрузка, т.е.меньше отдельных нагрузок.Google GWT активно продвигает эту технику (т.е.Пакеты изображений).

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

Answer 2

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

Альтернативой является использование visibility:hidden, но вы рискуете столкнуться с пользовательским агентом, который делает практически то же самое. visibility:hidden требует, чтобы браузер вычислил блочную модель для изображения, что требует загрузки изображения (чтобы получить размеры).Однако я не верю, что это работает в IE6.

Последний метод (и мой любимый) — создать элемент div непосредственно перед </body> ярлык.Позиционируйте его абсолютно с left: -99999999px; top: -99999999px.Браузер вынужден отображать изображения (и, следовательно, загружать их), и нет необходимости иметь дело с беспорядочным Javascript.

Теперь, чтобы интегрировать это с вашей проблемой, поместите код для вашей карты Google. после ваш «предварительный div».Ваш браузер будет вынужден загружать изображения перед запуском кода для создания карты.Это должно решить вашу проблему.

Надеюсь это поможет!

Answer 3

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

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

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

Взгляни на «Аякс» в действии:Предварительная загрузка изображений