Эффективная загрузка скрытых / слоистых изображений на веб-странице

Question

У меня есть многослойный компонент div, который отображает последовательную серию больших изображений в килобайтах путем слайд-анимации верхнего изображения, чтобы показать следующее изображение ниже. Я пытаюсь понять, как лучше к этому подойти.

Подход 1:

Нанесите слой div на друг друга, каждый с изображением, назначенным в качестве фона, и сдвиньте div по мере необходимости.

Будут ли скрытые элементы загружать свои изображения при загрузке страницы или только при их обнаружении? Это поведение браузера / клиента? Все ли изображения (jpegs, pngs) ведут себя одинаково в этом отношении?

Подход 2:

Используйте только два элемента div - один, который обрабатывает скольжение, другой - загрузит и покажет следующее изображение.

В этом случае возможно ли предварительно загрузить следующее изображение, чтобы при открытии следующего изображения JavaScript не замедлялся?

Спасибо - и если у кого-то есть другие идеи, я бы хотел их услышать.

Answer 1

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

Я бы порекомендовал использовать AJAX для снятия каждого изображения на ходу.Определенно возможно предварительно загрузить изображения.

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

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

http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

Answer 2

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

Вы можете определенно предварительно загружать изображения с помощью Javascript.просто создайте объект изображения и установите его источник на то, что вы хотите, что автоматически приведет к загрузке изображения.Для этого его не нужно вставлять в DOM или видеть для пользователя.

Скрытые элементы div СЛЕДУЕТ загружать их содержимое автоматически, независимо от того, являются они видимыми или нет.Я не могу вспомнить ни один браузер для ПК, который бы этого не делал, но я бы рискнул предположить, что некоторые браузеры, предназначенные для устройств с ограниченными ресурсами (мобильные телефоны для одного), могут оптимизировать вещи и отложить загрузку содержимого до тех пор, пока контейнер не будетсделано видимым, чтобы сэкономить на сетевом трафике.