Show loading gif until div has content


On a Wordpress site I am using jQuery to show and hide a div as appropriate.

My problem is that the div is showing as empty and then the data is displayed following a complicated database query. What I would like to do is show a loading gif until all the content is displayed. Is this possible bearing in mind that I have 3 divs on the page that are shown and hidden depending on what the user clicks on?

The problem is visible at as this is a particularly slow loading shared hosting webserver.


Please post the js code you use to fetch the data and update the page


Thanks JimL

PHP is used to query the database and the js is only used to hide and show the divs.

function gedshow_get_name_function(){
global $wpdb;
$facts_tbl = $wpdb->prefix.'gedshow_facts';
$name_tbl = $wpdb->prefix.'gedshow_names';
//My code starts here
//Get surnames from Names table
$name = sanitize_text_field($_GET['sname']);
$query = "
                        SELECT *
                        FROM $name_tbl
                        WHERE surname LIKE '$name'
                        ORDER BY given ASC";
$results = $wpdb->get_results($query, OBJECT);
<div class="cs_section"> <h5><?php echo (strtoupper($name));?></h5></div>
<div class="cs_show_surname"><button type='button' class='cs_surname_button hidden' style='width:180px' value="Show_all">Show all</button></div>
<div class="cs_surname1">
<div class="cs_kb_cont">
    foreach ($results as $result) {
    if (count($results)<1){echo "No results found";}
    $sx = trim($result->sex);
    <div class='cs_kb_col_sn'>
        <button type='button' class="my_btn" style='width:205px' value="<?php echo esc_js($result->ref);?>" name="<?php echo esc_js($result->surname);?>">

            if (($sx)=== 'M'|| ($sx)=== 'm'){
            echo ucfirst($result->given) . " " . ucfirst($result->surname) ."  &#9794; </button></div>";}
            else {
                echo ucfirst($result->given) . " " . ucfirst($result->surname) ."  &#9792; </button></div>";}

    </div></div></div><div class="cs_clearfix"></div>
        var ind = jQuery(this).val();
        var na = jQuery(this).text();
        jQuery.get(ajaxurl,{'action': 'getind', 'indv': ind, 'nme': na },
            function (msg) { jQuery(".result_area_ind").html(msg);});


//return ob_get_clean();
echo ob_get_clean();



Ok, this is a js only solution so PHP is irrelevant.

Just change your code so the first thing that happens is that a preloader (often called a spinner) shows. And after receiving the response (in the jQuery.get callback) you just hide it again. You can use $(object).closest(’.spinner’) or similar to dynamically select the proper preloader so you don’t have to hardcode each one.