时间戳

首页 > 解决方案 > 在等待 getJSON 时显示加载 gif

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

问题描述

我想在等待 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。

我将不胜感激任何帮助。

提前致谢。

标签： jqueryhtmlcss

解决方案

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

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

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

您可以通过 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/

推荐阅读