preload и адаптивная верстка
Сделал следующее.
В 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">`) } |
Там оказывается все предусмотрено и все гораздо проще
<link rel="preload" href="./img/fon.jpg" as="image" media="(min-width: 768px)"> |
voraa,
:thanks: |
Но старый (85 версия только что установилась) дряхлый Лис чихать хотел на эту media и все равно предзагружает картинку.
Остается надеяться, что никому в голову не придет запускать его на смартфоне или планшете. |
Часовой пояс GMT +3, время: 15:51. |