jquery 在 google chrome 浏览器上缓慢渲染微调器

Question

我试图在单击按钮时显示微调器以指示浏览器正在幕后执行操作。微调器在我单击 Firefox 浏览器上的按钮后立即显示，而不是在 Google Chrome 浏览器上显示。在 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;
}

在 Google Chrome 中，单击按钮会立即显示加载 div。

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

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