UWP Javascript как скачать и назначит Background?

Question

[Владимир]

Добрый день
Есть приложение на Javascript. В зависимости от условий на сервере меняется бэкграйнд в приложение.
Как сделать так, что бы при старте, приложение скачало подложку и каждый раз не испрользовать изменения в css для определения поджложки.
Просто в момент изменения экрана, на 1-2 секунды загорается белый экран, пока не примениться свойство новой подложки.

Хочется сделать так, приложение при старте скачивается файл подложки, и в css всегда используется локальное свойство обращения к данному файлу.

Comments

[Andrey Suha]

Инлайн стиля? Было бы неплохо код посмотреть

[EVG]

Уточните пожалуйста, что имеете в вмду под изменением css?

К примеру, вы можете воспользоваться переопределением бэкграунда через свойство style елемента, или даже использовать конструкции CSSOM.

Или проблема в том что картинка очень большая и происходит временной лаг на её загрузку?

[Владимир]

EVG, на данный момент использую именно переопределение стиля через jquery.
$('body').css('background-image', url).
Значение url приходит при старте, и каждый раз если меняется экран он переопределяет этот стиль. Хотелось бы в css сразу использовать статический url. Но при первом запуске скачивать файл, например bg.jpg.

[Robur]

Владимир, чтобы сразу в css было нужное - вам надо этот css генерировать на сервере разным. чтобы в css файле сразу было `body {background-image: url('...')}`
Если условия меняются редко (например эту неделю - один фон, эту другой) то можно менять хоть руками, хоть скриптом прямо в файле.
Если часто или для разных пользователей разный - то генерить css при запросе динамически.
можно этот стиль сделать в отдельный css-файл, который будет меняться, а остальное все оставить как есть.

[EVG]

Владимир, стало яснее но не до конца, можете показать соответствующую таблицу стилей для body, которую Браузер получает при загрузке страницы. Я правильно понимаю, что беспокоит белый фон в процессе загрузки страницы?

[Владимир]

EVG, таблица стилей локальная, при старте приложения через ajax обращаюсь на сервер, получаю актуальную ссылку на нужный бэк и применяю его $('body').css('background-image', url).
Так как в процессе работы бэк уже не измениться, при переходе по экранам это приходится делать каждый раз, и каждый раз получается что уже прогрузилась почти страница, появились элементы, но фон до определенного момента белый, пока не примениться свойство.
Хотелось везде в локальной таблице стилей бэк применить в виде body { background-image: "bg.jpg"; }, а при первом запуске приложения просто скачать этот файл с сервера и положить в корень, или в папку temp или все равно куда, просто что бы не использовать переопределение каждый раз, что бы избежать этих резких вспышек белого экрана.

Answer 1

[EVG]

Вы можете воспользоваться тем, что для свойства background-img, как и для background, можно указывать несколько слоев фонов, таким образом, дефолтовый фон должен быть в самом нижнем слое. Обратите внимание, что если в качестве дефолтового слоя указать изображение, то опять же может происходить временной лаг, поэтому, в качестве уж совсем нижнего слоя укажите либо градиент/цвет, либо простенькую svg через data-url.

Затем, когда получите актуальный URL фоновой картинки, поставите его в свойство спереди, отделив от предыдущего значения запятой.

Вот mdn по теме https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Comments

[Владимир]

Спасибо но постарался решить проблему по другому, создал start.js добавил в head, и в нем прописал:
document.write();
Теперь срабатывает моментально, изредка бывают задержки, но все же лучше чем было )
Может теперь просто можно как то поиграться с кешированием этой картинки, что бы доставалась из кэша, так как url в последующем достается из кук

[EVG]

Не стоит надеяться на кэширование.

Как вариант, если base64-представление дефолтовой картинки умещается в 4Kb (https://stackoverflow.com/questions/695151/data-pr... то можно попробовать грязный хак с указанием картинки через data-url