Jquery Ajax loading image while getting the data

I am using a Jquery Ajax function to fetch the data from database, on click event.

This function works fine and displays the data. But it takes time to load the data, so I want to put a loading image, while the data is been fetched. I used this method to do

<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").h开发者_如何转开发tml(data);
                    }
                });
            });
        });
    });
</script>

When I click on the button, the loading image appears, but after success the image should disappear, in my case it still remains there

Is my code wrong? or I have used a wrong method?

This is what I have always used in the past:

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

Just before your $.ajax(); call do this. Replace the entire html with this before the ajax call. Then onsuccess the entire html is replaced with your content.

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

From what I can tell you code looks fine. Are you sure that the success function is being called? Try adding alert("") to the success function and see if it is successfully being called. If not there in lies your issue.

$("#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;
});

Add these lines in your page.

<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>