Стоит вот такая задача. Клиенты задают фоновые изображения для блоков через админку ворпресс. Они автоматически прописываются в css. Я хочу, чтобы, если пользователь заходит на сайт с мобильного, в качестве фонового изображения грузились версии "thumbnail" заданного клиентом фона ("thumbnail" сгенерированы ворпрессом автоматически при загрузке изображения).
Для этого я прописал скрипт, который на мобильном экране (document.documentElement.clientWidth < 420) добавляет элементу встроенный стиль background-image с маленьким изображением и перебивает стиль background-image из css.
То есть все хорошо, изображения меняются в зависимости от разрешения экрана. Однако у меня возник такой вопрос, так как не ориентируюсь в теме. Имеет ли вообще смысл это для повышения производительности? То есть в каком порядке обрабатываются различные вещи? Возможно, скрипт заменил изображение, но к тому времени изображение, заданное через css, уже было загружено браузером? То есть весь смыл в том, чтобы на маленьком экране большое изображение не грузилось, а грузилось маленькое. Где правильно разместить скрипт (он у меня стоит внизу страницы и определяет изображение, которое нужно заменить через getComputedStyle)? Возможно есть лучшие решения?
Сразу оговорюсь, очевидные решения типа прописать меньшее изображение в css через медиа-запрос не подходят, так как клиент в любой момент может задать любое изображение. Нужно, чтобы маленькая версия подхваывалась автоматически. Аналогично изображение на полный размер контейнера с абсолютным позиционированием тоже нет. Это должно загружаться только стандартно через админку и прописываться в css, как background-image.
Вот как-то так. Большое спасибо, если кто-то подскажет что-то дельное.
data-background
и скриптом такие фоны превращать в реальные, тогда браузер не будет изначально их понимать и отображать.