Preload ajax loaded content

Question

On my site I use one core/frame PHP file. If user hit one of my link (like contact, our about..etc..) the content loaded via ajax. I use the following snippet to achieve this:

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).animate({opacity:0}, 
                function(){ // the callback, loads the content with ajax
                    $(container_div).load(url, //only loads the selected portion
                        function(){                        
                           $(container_div).animate({opacity:1}); 
                    }

                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);
                                    

                return false; 
                
            });
        },
        init: function(params){ 
            container_div = params.containerDiv; 
            content_div = params.contentDiv;
            
            return this; 
        }
    }
}();

I need help how to integrate a preloading, so if visitors hit one of my link (for example the gallery menu) will see a little loading image, because now they see the big white nothing for long - long seconds.

Answer 1

Add loading image beforing ajax call and after you get response from server simply replace that image with data like the one below

 function(){ // the callback, loads the content with ajax
        $(container_div).html("<img src='loading.gif' />");//add image before ajax call
        $(container_div).load(url, //only loads the selected portion
        function(){
         $(container_div).html(data);//replace image with server response data                        
        $(container_div).animate({opacity:1}); 
    }

Answer 2

Try this

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).html('Loading...');  //replace with your loading img html code
            $(container_div).load(url, //only loads the selected portion
                function(){
                    $(container_div).css({opacity:0});
                    $(container_div).animate({opacity:1}); 
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);


                return false; 

            });
        },
        init: function(params){ 
            container_div = params.containerDiv; 
            content_div = params.contentDiv;

            return this; 
        }
    }
}();