Jquery Ajax загрузка изображения при получении данных

Question

Я использую функцию Jquery Ajax для извлечения данных из базы данных, по событию щелчка.

Эта функция отлично работает и отображает данные.Но для загрузки данных требуется время, поэтому я хочу поместить загрузочное изображение, пока данные извлекаются.Я использовал этот метод, чтобы сделать

<script type="text/javascript">
    jQuery(function($) {
        $(document).ready(function() {
            $("#imgs").hide();
            $(".letter").bind('click', function(){
                $("#imgs").fadeIn();
                var val = $(".letter").val;
                var site = '<?php echo site_url(); ?>';
                $.ajax({
                    url: site+'/wp-content/themes/premiumnews/newContent.php?letter='+$(this).html(), 
                    success:function(data){
                        $("#imgs").hide();
                        $("#content1").html(data);
                    }
                });
            });
        });
    });
</script>

Когда я нажимаю на кнопку, появляется изображение загрузки, но после успеха изображение должно исчезнуть, в моем случае оно все еще остается

код неверный?или я использовал неправильный метод?

Answer 1

Это то, что я всегда использовал в прошлом:

$('#loading_div').hide().ajaxStart(function(){
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

Answer 2

Прямо перед вашим $ .ajax ();позвони, сделай это.Замените весь html этим до вызова ajax.После этого весь HTML-файл заменяется вашим контентом.

$("#content1").html("<img style=\"margin-left: auto; margin-right: auto;\" src=\"ajax-loader.gif\" alt=\"Loading...\" title=\"Loading...\" />");

Answer 3

$("#report").live( "submit" , function(){
    // Add loading image until get the results
    $("#loading_div").html("<img style=\"margin-left: auto; margin-right: auto;\" src=\"ajax-loader.gif\" alt=\"Loading...\" title=\"Loading...\" />"); 

    var formdata = $(this).serialize(); // Get 
    $.post( "ajax_report.php", formdata, function( data ) {
    $("#results").html ( data ); // Add success data in '#results' element
    $("#loading_div").empty(); // Remove loading image on success
        });

        return false;
});

Добавьте эти строки на свою страницу.

<span id="loading_div"></span>
<span id="results"></span>
<form id="report" name="report" action="" method="post">
    <input name="firstname" value=""></input>
    <input name="middlename" value=""></input>
    <input name="lastname" value=""></input>
</form>

Answer 4

Из того, что я могу вам сказать, код выглядит нормально. Вы уверены, что вызывается функция успеха? Попробуйте добавить alert("") к функции успеха и посмотрите, успешно ли она вызывается. Если нет, то во лжи твоя проблема.