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

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

Подход 1:

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

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

Подход 2:

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

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

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


person Yarin    schedule 02.09.2010    source источник


Ответы (2)


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

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

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

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

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

person KP.    schedule 02.09.2010
comment
@ Марк Б: Я это понимаю. Я хочу сказать, что если человек просматривает только часть слайд-шоу, AJAX можно использовать для загрузки только этих изображений по мере продвижения слайд-шоу (загружается только следующее в слайд-шоу). Если человек просматривает 2 из 10 изображений, но все 10 загружены заранее, это неэффективно. Если загружены только 3 (2 плюс «следующий»), это более эффективно. - person KP.; 02.09.2010
comment
Пожалуйста, используйте это, не изобретайте велосипед, лайтбокс или варианты - это ответ. - person Ryley; 02.09.2010
comment
@КП: Спасибо за ссылку. Кажется, Ajax с обратными вызовами поможет мне в этом. - person Yarin; 06.09.2010
comment
@Ryley: мы используем упрощенные примеры для демонстрации вещей на SO-, и даже если моя проблема решаема с помощью стандартных компонентов, мне разрешено спрашивать об этом. - person Yarin; 13.03.2012
comment
Извините, @Yarin, кто-то, должно быть, только что заставил меня отлаживать ужасный код VB, повторно реализующий объект Date или что-то в этом роде... Обычно я в гораздо лучшем настроении :) - person Ryley; 13.03.2012

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

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

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

person Marc B    schedule 02.09.2010
comment
У меня нет проблем с этим ответом, притворитесь, что это отрицательный ответ на комментарий КП... - person mraaroncruz; 10.01.2012