jQuery在Google Chrome浏览器上缓慢渲染微调器

Question

我试图在单击按钮时显示微调器，以指示浏览器正在幕后执行操作.微调器在我单击Firefox浏览器上的按钮后立即显示，但在Google Chrome浏览器上没有显示。在谷歌浏览器上，有8秒的延迟。在执行操作时，我已经在开发人员工具上对其进行了调试，但我确实看到单击按钮时类属性已添加到 html 代码中。

这是我的标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadSpinner" style="display:none;"></div>
<button type="submit" class="btn spinnerEvent" >On</button>

<script>
$(document).on("click", "button.spinnerEvent", function(event){
$('#loadSpinner').addClass('show');  //LOADS THE SPINNER
});
</script>
<style>
#loadSpinner.show{
background:#000 url(../images/spinner-small.gif) no-repeat center center;
background-color: transparent;
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
}
</style>

Answer 1

我创建了一个工作小提琴，对您的代码进行了微小的更改： https://jsfiddle.net/jennifergoncalves/783gyyou/2/

.HTML：

删除display:none因为该内联样式将优先于style标记中定义的 CSS 样式

<div id="loadSpinner"></div>
<button type="submit" class="btn spinnerEvent">On</button>

.CSS：

设置样式标记中的所有样式。

#loadSpinner {
display: none;
}
#loadSpinner.show {
background: #000 url(../images/spinner-small.gif) no-repeat center center;
background-color: red; /*changed from transparent to red so you can see the div, even though I don't have access to the actual image*/
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
display: block;
}

在谷歌浏览器中，单击按钮后，加载div 会立即出现。

如果仍然遇到问题，请尝试在页面上预加载旋转图像。 可能只是图像本身需要一些时间来加载，并且代码中没有延迟。

以下是有关如何在页面加载后预加载用作背景的 CSS 图像的一些提示： https://css-tricks.com/snippets/css/css-only-image-preloading/