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

Антон
Антон
549
4
Всем привет! Подскажите, при таком условии: 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
    26.02.2021, 14:39
    Александр доброго дня! Что то у вас на главной вот такая картинка выходит
    <img
    src=«https://itchief.ru/assets/uploadify/7/e/5/7e5703031bbcef5a782a0c66fb3554ccs.jpg» class=«fancybox thumbnail center»>

    1. Александр Мальцев
      Александр Мальцев
      26.02.2021, 15:36
      Спасибо, поправил.
  2. Антон
    Антон
    26.02.2021, 01:27
    Александр, в очередной раз Спасибо за подсказку и помощь!
  3. Александр Мальцев
    Александр Мальцев
    25.02.2021, 16:17
    Привет! Для этого не обязательно искать ответ. Можно открыть инструменты разработчика в браузере (Ctrl + Shift + I) и проверить.

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

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