I am using jquery ajax to load content into a DIV block called "load_content" and i use a DIV block called 'loading_page' to display a loading animation/message. when the ajax part of the code has successfully run its course, the 'loading_page' block should become invisible.

the code is below:

$('#loading_page').css('display','block');
   
        $.ajax({
            type: "POST",
            url: "load_page.php",
            data: 'view='+url,
            dataType: "html",
            success: function(msg){
               
                if(parseInt(msg)!=0)
                {
                    $('#load_content').html(msg);
                    $('#loading_page').css('display','none');
                }
            }
           
        });

this is working successfully, for loading static pages via ajax. the only issue is that one of the pages loading is dynamically generating information via a Mysql database.

when this happens, the page seems to load (i assume $('#load_content').html(msg); is successfully running) but the next line $('#loading_page').css('display','none'); does not immediately execute. there seems to be a delay and i cannot interact with the loaded content until it does.

what is the reason for this? how can i rectify it?

i am very new at jquery so any help is much appreciated. :)