jquery - 在等待 getJSON 时显示加载 gif

Question

我想在等待 getJSON 返回结果时显示正在加载的 GIF。

我正在使用 $("#loader").hide() 和 $("#loader").show() 事件，但没有成功。

@{
<style>
    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
    }
</style>

<div class="loader" style="display:none;">
    <img src="~/Images/loadingAnim.gif" width="208" height="13"/>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#ID").change(function () {
            //some code
            $("#loader").show();
            $.getJSON(url, { //more code});
            $("#loader").hide();
        })
    })
</script>
}

当 ID ddl 更改时，我看不到 GIF。

如果有任何帮助，我将不胜感激。

提前致谢。

Answer 1

首先，我不知道您使用 #ID 是什么意思，因为我看不到您提供的代码中具有该 ID 的元素。

在下面你可以看到一些修改过的代码，我所做的是将 #loader 更改为 .loader 因为 HTML 加载元素有一个加载器类而不是 id。如果你想定位一个 ID，你应该在你的元素上使用属性 id="loader"。

我还删除了 html 元素的宽度、高度和 display: none 样式，因为这不是必需的。您可以在您的类(class)中指定所有这些 Prop 。但是根本不要指定您的显示属性。

您可以通过 javascript 隐藏元素，如下面的 HTML、Javascript 和 CSS 所示。

<div class="loader" >
    <img src="~/Images/loadingAnim.gif"/>
</div>
<button id="btn">Load JSon</button>  

    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        z-index: 10000;
    }

$(document).ready(function () {
$(".loader").hide();
        $("#btn").on("click",function () {
            //some code
            $(".loader").show();
            $.getJSON(url, (data) => {
                console.log(data);
              $(".loader").hide();
            });

        })
    })

这是 JSFiddle 中的一个工作示例 https://jsfiddle.net/c017xza4/11/