0

検索ボックスがあります。ユーザーが検索アイコンをクリックすると、ライトボックス内に結果を表示する ajax フォームが起動されます。

問題は、読み込み中の gif が可能な限り最後の 1 秒まで表示されないという事実にあります。クエリには数秒かかるため、その間にこの 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 に答える