IE11 and Edge do not load the background image in a style if it is not used immediately after loading, how to fix it?

Question

css

Colleagues,
faced such problem in Edge and IE11.
Let's say there is a button (simplified):

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

When the page loads, it has the loading class , which shows the loading spinner. It works as it should.

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

When the page is finished loading, the loading class is replaced with ready :

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

Relevant class:

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

So, this background image (ready.svg) is not shown when changing the class. Moreover, if you load this image as a hidden img at the end of the page, then everything works: It seems that IE11 and Edge do not load or apply a background image in a div if it does not need to be shown immediately after loading. Could this be? Who faced how to overcome this glitch? Thanks for answers!
<img src="ready.svg" style="display:none;" />

Answer 1

I faced. This is normal behavior for browsers - the rest just load with a delay - this is also not sugar. Valni url before and after. When changing the state, change not the image, but the opacity of the pseudo-elements, for example. Or transform + transition + overflow: hidden. Any effect, but leave the url outside the state class