IE11 和 Edge 不加载 CSS 类的背景图像，如果没有立即使用，如何解决？

Question

我在 Edge 和 IE11 中遇到以下问题。

有一个按钮做成了一个div：

<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 的背景，如果它没有在页面加载时立即使用。可以吗？谁遇到过这样的事情，如何摆脱这种行为？

Answer 1

在动态类添加中添加超时为我在 IE 和 Edge 中解决了这个问题（我正在使用 jQuery）。

setTimeout(function(){
  $('#element').addClass('loading');
},1);

不完全确定为什么！我的课程被添加到表单提交事件中，所以也许请求被阻止了？！希望这对某人有所帮助。