IE11 и Edge не подгружают фоновую картинку в стиле, если она не используется сразу после загрузки, как исправить?

Question

[gregorypetrov]

Коллеги,
столкнулся с такой проблемой в Edge и IE11.

Допустим, есть кнопка (упрощенно):

<div class='button loading'>
</div>

При загрузке страницы у нее класс loading, который показывает спиннер (крутилку) загрузки. Это работает как нужно.

.loading {
background-image: url ('loading.gif');
}

Когда загрузка страницы завершена, класс loading заменяется на ready:

<div class='button ready'>
</div>

Соответствующий класс:

.ready {
background-image: url ('ready.svg');
}

Так вот, эта фоновая картинка (ready.svg) при смене класса не показывается. Причем, если в конце страницы подгрузить эту картинку в виде скрытого img, то все работает:

<img src="ready.svg" style="display:none;" />

Такое впечатление, что IE11 и Edge не подгружают или не применяют фоновую картинку в div, если ее не нужно показывать непосредственно после загрузки. Может ли такое быть? Кто сталкивался, как побороть этот глюк?

Спасибо за ответы!

Comments

[Сергей]

попробуй вместо svg просто png подгружать

Answer 1

[Никита Кит]

Я сталкивался. Это нормальное поведение для браузеров - остальные просто прогружают с задержкой - это тоже не сахар. Вальни url before и after. При смене состояния изменяй не image, а opacity псевдоэлементов, к примеру. Или transform + transition + overflow: hidden. Какой угодно эффект, но url оставляй вне класса-состояния