Учитывает ли браузер media условия при загрузке изображений?

Антон
Антон
503
4
Содержание:
  1. Комментарии
Всем привет! Подскажите, при таком условии:
1) Браузер все равно подгружает картинку, а потом выполняет условие (убирает ее) или же -->
2) Браузер видит условие меньше или = 992 и не подгружает фон при просмотре на таком разрешении???
P.S Стало дико интересно, а внятного ответа так и не нашел.
@media (min-width: 992px) {
	body {
		background-image: url(/img/1999.png);
	}
}

body {
	overflow-y: scroll;
	background-color: grey;
	background-attachment: fixed;
}

Комментарии: 4

  1. Nik
    Nik
    2021-02-26 14:39:19
    Александр доброго дня! Что то у вас на главной вот такая картинка выходит
    <img
    src=«https://itchief.ru/assets/uploadify/7/e/5/7e5703031bbcef5a782a0c66fb3554ccs.jpg» class=«fancybox thumbnail center»>

  1. Александр Мальцев
    Александр Мальцев
    2021-02-26 15:36:48
    Спасибо, поправил.
  • Антон
    Антон
    2021-02-26 01:27:31
    Александр, в очередной раз Спасибо за подсказку и помощь!
    1. Александр Мальцев
      Александр Мальцев
      2021-02-25 16:17:49
      Привет! Для этого не обязательно искать ответ. Можно открыть инструменты разработчика в браузере (Ctrl + Shift + I) и проверить.

      1. Изменяем размер браузера так, чтобы он был меньше 992px. После этого переходим на вкладку Network и загружаем страницу.
      Содержимое Network в Chrome
      На скриншоте видим, что браузер не загружает изображение «/img/1999.png», если ширина viewport меньше 992px.

      2. Изменяем ширину браузера (>= 992px) и опять загружаем страницу.
      Браузер загружает изображение, если ширина viewport больше или равно 992px