Show loader while loading large amounts of data

Show loader while loading large amounts of data

Hi all, I am having a little problem trying to show a loader (An animated GIF) while some request to a database happens. I have a page where the user selects a YEAR and when they select it with AJAX I perform a request to a database to get all the values for that specific year.

The problem is that there is a lot of information (4000+ records) that I need to query and show in a table (Actually I didn't use a table I use DIVs that look like a table), and when the user selects the year the webpage freezes for about 5 seconds and then it loads all of the data.

Is there a way to sort of show an image loader gif while the data is being gotten? I tried putting the loader image in the DIV container while no year is selected and then once the request is done, I substitute the DIV container's contents (The image loader) for the data from the database.

Here is a little bit of code for what I'm doing:

HTML:
...
<div id="evaluation_section"><img src="../images/ajax-loader.gif" alt="Loading data, please wait..."></div>
...


JS
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        showEvaluationsTable();
        $("#year").change(function() {
            showEvaluationsTable();
        });

        function showEvaluationsTable(){
            $.post("show_data.php",
                {year:$("#year").val()},
                function(registerResponse){
                    $("#evaluation_section").html(registerResponse);
                }
            );
        }
    });
</script>


show_data.php
Connects to the database, gets the info for the current year and generates the HTML code for to display the data.

Is it possible to accomplish what I want? Could anybody point me to the right direction?

Thanks in advance!