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

Question

Вот в чем дело: у меня есть карта Google с большим количеством маркеров.

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Взгляните на Ajax в действии: предварительная загрузка изображений