preload и адаптивная верстка

[voraa]

Сделал следующее.
В HTML пишу

<link rel="preload" href="./img/fon.jpg" as="image" crossOrigin="anonymous">

В CSS имею

body {
  background-color: #eeeeee;
  min-height: 100vh;
}
@media screen and (min-width: 768px) {
body {
  background-image: linear-gradient(to right, rgba(250,250,250,0.9) , rgba(250,250,250,0.6)), url("./../img/fon.jpg");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed;
}  
}

Получается некоторая фигня. с одной стороны хочется, что бы картинка фоновая быстрее загрузилась. С другой стороны на маленьких экранах, где она не нужна (в том числе и на смартфонах) она все равно будет грузиться.
Есть опыт какого-нибудь нормального решение этой проблемы?


Все. Вопрос снят. Поленился до конца документацию дочитать! Бывает.

[рони]

voraa,
как вариант ...

if (window.matchMedia("screen and (min-width: 768px)").matches) {
   document.write(`<link rel="preload" href="./img/fon.jpg" as="image" crossOrigin="anonymous">`)
}

[voraa]

Там оказывается все предусмотрено и все гораздо проще

<link rel="preload" href="./img/fon.jpg" as="image" media="(min-width: 768px)">

[рони]

voraa,

[voraa]

Но старый (85 версия только что установилась) дряхлый Лис чихать хотел на эту media и все равно предзагружает картинку.
Остается надеяться, что никому в голову не придет запускать его на смартфоне или планшете.