2

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

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

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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