2

Будут ли подгружаться картинки, если родитель невиден, т.е. display: none?

  1. Если да, то как это предотвратить, как можно грузить разные разрешения для разных девайсов?
  2. Цель: уменьшить время загрузки картинок.

Юзается bootstrap, изначально думал пользоваться hidden-xs, hidden-md.

5
  • 1
    display: none удаляет элемент из дома. Так что по идее, картинки не будут загружены (могу ошибаться). Для таких вещей можно использовать visibility: hidden;opacity:0; 7 июн 2016 в 15:19
  • Можно подгружать странички вообще без картинок или с заглушкой однопиксельной. Пока, например, у элемента присутствует класс "noimg" - используем заглушку. Если элемент картинка - то размещаем заглушку для этого элемента, при этом у самого элемента определяем какой-то id. Когда этот элемент нужно отобразить - обращаемся AJAXом к серверу, сообщаем ему id элемента, в ответ получаем адрес картинки. Картинку (адрес) прописываем в свойство src через attr (api.jquery.com/ATTR). Правда тогда будем зависеть от JS. Можно в css дополнительные стили прописать в духе "заглушка вместо картинки".
    – DimXenon
    7 июн 2016 в 15:37
  • @DimXenon, а зачем AJAX? Можно же просто установить нужные атрибуты src и снять класс, который отвечает за отмену их отображения, а изображения браузер сам подтянет: jsfiddle.net/ozmumLzh 7 июн 2016 в 16:07
  • Можно и напрямую, конечно. Вариант с AJAX подразумевает большую гибкость в выборе отображаемого контента. Например, если мы ещё не знаем (на момент отдачи страницы со скриптом), что захочет увидеть пользователь, или что мы захотим ему показать (Лунтика или Лару Крофт топлесс).
    – DimXenon
    7 июн 2016 в 16:12
  • @DimXenon, однако, по сути, если мы имеем дело с изображениями, то можно всё равно просто назначать атрибуты src ... Хотя, утверждать насчёт правильности того или иного не имею право :) — мало опыта. 7 июн 2016 в 17:41

3 ответа 3

3

Будут ли подгружаться картинки, если родитель невиден, т.е. display: none?

Будут.
Проверил прямо сейчас из интереса.
Chrome50, FF44.


  1. Но это плохой метод, лучше используйте заглушки или ленивую загрузку картинок.
2

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

display: none; 

для картинок вообще использовать не рекомендую.

1

Есть вот такой вариант реализации:

picture {
    display: block;
    width: 100%;
    text-align: center;
}
img {
    max-width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
 <picture>
  <source media="(min-width: 650px)" srcset="yacht.jpg">
  <source media="(min-width: 465px)" srcset="bee.jpg">
  <source media="(min-width: 100px)" srcset="queenstown.jpg">

<img src="yacht.jpg" alt="a cute kitten"><!-- Если браузер вдруг не поддерживаетэту функцию -->

</picture>

Картинки НЕ подгружаются для других размеров, пока другие размеры не наступят.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.