extend jquery load() function to show spinner inside div

Question

is there a way to alter .load behavior so that it load a spiner inside any div that is loading data ?

example

<div class='content lside'></div>
<script>
    $(document).ajaxStart(function() {
        $('body').append('<div class="notice" style="position:fixed;top:40%;left:30%;z-index:99999;"id="loadingspin">loading</div>');       });
    $(document).ajaxStop(function() {
        $('#loadingspin').fadeOut().remove();
    });
    $('.content').load("<?=base_url();?>booking/<?=$day?>");
</script>

i use above script.

but what i actually want is that when ever ajaxstart the content of $('.content') is replaced with spinner until it finish loading the new content.

so is there a way i can extend .load to do that by it self and replace the ajaxstart, so where ever $(div).load() is called a $(div).html('spiner'); is fired.

if not, is there a way .ajaxstart can reference the div that the content will be loaded into ?

please note: im currently using .ajaxstart and .ajaxstop in my header script in all my webpage to handle showing the spinners in general, but i want to replace it/extend it with div specific solution that would still work on any page without further editing into each and every ajax request.

thanks

Answer 1

probably something like this should do the trick. Override jQuery's prototype and save the old function.

(function(){
    var oldLoad = jQuery.fn.load;
    jQuery.fn.load = function( url, data, complete ){
        /*
         * do your stuff
         */
        oldLoad.call( jQuery, url, data, complete );
    }
})();

That changes the globally available jQuery.load() method for the whole page so »your stuff« should be executed even if other scripts call that method, a least after your re-definition of that function is parsed.