<head>

<script>

$('#loading_spinner').show();



var post_data = "my_variable="+my_variable;

$.ajax({

    url: 'ajax/my_php_page.php',

    type: 'POST',

    data: post_data,

    dataType: 'html',

    success: function(data) {

        $('.my_update_panel').html(data);

//Moved the hide event so it waits to run until the prior event completes

//It hide the spinner immediately, without waiting, until I moved it here

        $('#loading_spinner').hide();

    },

    error: function() {

        alert("Something went wrong!");

    }

});

    </script>

</head>



<img id="loading_spinner" src="loading-spinner.gif">



<div class="my_update_panel"></div>