Стратегия предварительной загрузки изображения Javascript - PullRequest
0 голосов
/ 08 октября 2010

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

  • Сценарий предварительной загрузки изображения должен быть выполнен как можно скорее.Он должен располагаться в верхней части HTML (в разделе HEAD), в отличие от других сценариев, которые идут в конец раздела BODY.
  • Он не должен полагаться на библиотеку (например, jQuery), посколькуэто может задержать выполнение.
  • Спрайты CSS и фоновые изображения не нужно предварительно загружать, потому что CSS - обычно вызываемый в верхней части HTML - уже выполняет свою работу (это, конечно, уменьшает общую потребность в изображении JavaScript)preload).
  • Скрипт предварительной загрузки можно разместить и запустить на каждой странице сайта, чтобы быть уверенным, что он эффективен независимо от того, с какой страницы пользователь заходит на сайт.(Но как насчет того, чтобы каждый раз запускать скрипт, если только для проверки того, что изображения теперь кэшируются?)

Мне было бы очень интересно услышать ваше мнение по этому вопросу.

1 Ответ

2 голосов
/ 08 октября 2010

Сценарий предварительной загрузки изображения должен быть выполнен как можно скорее. Он должен быть расположен вверху HTML (в разделе HEAD), в отличие от других скриптов, которые идут внизу раздела BODY.

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

Он не должен полагаться на библиотеку (например, jQuery), потому что это может задержать выполнение.

Такая задержка не должна быть значительной

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

Браузеры могут оптимизировать и не загружать изображения, указанные в таблицах стилей, если они не отображаются.

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

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

...