Как избавиться от мерцания элемента при обновлении стилей?

Question

[Drakondr]

Есть div, для которого с помощью js изменяется
bacground: url()
но при изменении элемент на некоторое время становится белым, как от этого избавиться? Может есть способы ещё кроме как подложки под этот элемент с таким же фоном?

Comments

[Сергей Сергей]

делать предварительную загрузку

тэги

new Image( url )
ondownload => background = url;

Answer 1

[Spaceoddity]

в url() пропишите не ссылку на изображение, а само изображение в base64

Comments

[Drakondr]

Изначально всё в base64

[Spaceoddity]

Drakondr, тогда показывайте код. CSS тут не причём. Возможно js DOM перерисовывает.
UPD: Кажется понял в чём проблема.
С помощью JS просто навешивайте класс. А в CSS пропишите бэкграунды для этих классов.

Answer 2

[Андрей Федоров]

Сделайте изначально множественный бэкграунд - background-image: url(1.png), url(2.png);
Тогда оба изображения будут уже загружены. На js меняйте на нужное - background-image: url(2.png), белого фона не будет.
https://codepen.io/aliencash/pen/rNmMoJv

Comments

[Сергей delphinpro]

Для предварительной загрузки, не мешающей первоначальному рендеру страницы, существуют специальные средства: https://habr.com/ru/post/445264/

[Андрей Федоров]

Сергей delphinpro, и зачем это использовать для фоновых изображений? Только первоначальную загрузку сайта тормозить. В моей схеме фоновые изображения загрузятся с низким приоритетом. после всего важного, как и должно быть.

[Сергей delphinpro]

Андрей Федоров, Почему тормозить-то? Наоборот.

[Андрей Федоров]

Сергей delphinpro, ну как почему? потому что preload'ом вы повышаете приоритет загрузки изображения. И пока оно не загрузится не будет рендера значимой части страницы.