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,
:thanks:

[voraa]

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