Question

我试图在单击按钮时显示一个微调器以指示浏览器正在幕后执行操作。在我单击Firefox浏览器上的按钮但不在Google Chrome浏览器上时，会显示spinner。在Google Chrome浏览器上，延迟时间为8秒。我已经在动作执行时在开发人员工具上调试了它，但我确实看到在单击按钮时，类属性已被添加到html代码中。

这是我的标记：

＆＃13;

<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>

＆＃13;

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/

jquery在谷歌浏览器上慢慢渲染微调器

1 个答案: