0

我有一个搜索框。当用户单击搜索图标时，它会触发一个 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>
4

1 回答 1

2

您可以使用标签来表示加载 gif，它最初将被隐藏。在javascript点击事件显示加载时使用函数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>

我希望我对你有所帮助。

于 2013-10-25T18:55:27.907 回答