Question

我有一个搜索框。当用户点击搜索图标时，它会触发一个ajax表单，然后在灯箱内显示结果。

问题在于，加载gif直到最后一秒才显示。查询需要几秒钟，所以我需要在这段时间内显示这个gif。

如何获取加载gif以显示第二个点击搜索图标，该图标只指向下面的脚本？

<script>
    $('#performSearch').on('click', function () {
        $.ajax({
            url: "@(Url.Action("Search", "RespondentSearch"))",
            type: 'POST',
            data: { query: $('#query').val() },
            cache: false,
            async: false,
            success: function (result) {
                $("#search_results").html(result);
            }
        });
    });
</script>

<div class="sidebarSearch">
    <input type="text" name="query" placeholder="respondent search..." id="query" class="ui-autocomplete-input" autocomplete="off" />
    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
    <a href="#search_results" rel="lightbox" id="performSearch"></a>
</div>

Answer 1

您可以使用标记来表示最初将被隐藏的加载gif。在javascript click事件中显示加载你使用函数show（），当ajax返回请求的结果时你使用函数hide（）来隐藏加载。

您可以看到一些加载此链接http://www.ajaxload.info/

以下是更改代码的方法：

<pre>
    <script>
        $('#performSearch').on('click', function () {
            $('#loading').show();
            $.ajax({
                url: "@(Url.Action("Search", "RespondentSearch"))",
                type: 'POST',
                data: { query: $('#query').val() },
                cache: false,
                async: false,
                success: function (result) {
                    $("#search_results").html(result);
                    $('#loading').hide();
                }
            });
        });
    </script>
    <div class="sidebarSearch">
        <input type="text" name="query" placeholder="respondent search..." id="query" class="ui-autocomplete-input" autocomplete="off" />
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <a href="#search_results" rel="lightbox" id="performSearch"></a>
        <img src="caminho/loading.gif" id="loading" style="display: none;"/>
    </div>
</pre>

我希望我能帮到你。

单击链接后，灯箱加载gif不会立即显示

1 个答案: