Показать / Скрыть загрузку GIF

Question

То, что я пытаюсь сделать, - это то, что после нажатия кнопки на форме, помимо кнопки будет отображаться загрузочный gif-файл до тех пор, пока не будет загружен файл .php.

Мой код работает, как и должен, один разя нажимаю кнопку, и появляется кнопка «loading.gif», как и должно быть, только после того, как данные из файла .php выводятся на экран, я хотел отключить загрузочный gif, я не могу думать оЛучший способ сделать это.

        <div class="panel panel-primary">
            <div class="panel-heading">Display any backlinks for the current domain / url.</div>
            <div class="panel-body">

                    <form action="backlinks.php" id="backlinksForm" method="post" class="form-horizontal container-fluid" role="form">

                        <div class="row form-group">
                            <div class="col-sm-4 text-right"><label for="" class="control-label">Domain / URL: <a href="" data-toggle="tooltip" title="This is the URL / Page we will return the backlinks for"><span class="glyphicon glyphicon-question-sign"></span></a></label></div>
                            <div class="col-sm-8"><input class="form-control" type="text" id="backlink_url" name="backlink_url" value="" required="required" size="50" /></div>
                        </div>                  

                        <div class="row form-group">
                            <div class="col-sm-12 text-right">
                                <button type="submit" name="getBacklinks" class="btn btn-primary"><img id="imgLoading" class="hidden" src="images/loading.gif" alt="Loading..." />&nbsp;Source Backlinks</button>
                            </div>
                        </div>  

                    </form>
            </div>
            <div class="panel-footer">Enter your target URL and hit <b>Get Backlinks</b>!</div>
        </div>
        <div id="mainContent"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>        
<script>
$(document).ready(function(){
    $('#backlinksForm').on('submit', function(e){
        $('#imgLoading').removeClass('hidden');
        // Stop the form from submitting itself to the server.
        e.preventDefault();
        var backlink_url = $('#backlink_url').val();
        $.ajax({
            type: "POST",
            url: 'ajax-backlinks.php',
            data: {backlink_url: backlink_url, backlink_user_id: <?php echo $globId; ?>},
            success: function(data) {
                $('#mainContent').html(data);
            }
        });
    });
});
</script>

Любая помощь будет оценена.

Answer 1

После успешного вызова AJAX вы можете сбросить класс imgLoading обратно в скрытое состояние следующим образом:

$.ajax({
        type: "POST",
        url: 'ajax-backlinks.php',
        data: {backlink_url: backlink_url, backlink_user_id: <?php echo $globId; ?>},
        success: function(data) {
            $('#mainContent').html(data);
            $('#imgLoading').addClass('hidden'); //Hides the loading gif after main content is loaded
        }
    });