Just wondering would any one have quick code to add to the below to show a 'loading' gif in the '.content_background' div while the page is waiting for content to load into it? You'll see how the page works at ReverbStudios.ie.

/* Ajax Content Loading */

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).animate({opacity:0}, //Turn the opacity to 0
                    function(){ // the callback, loads the content with ajax
                        $(container_div).load(url+" "+content_div, //only loads the selected portion
                        function(){                        
                           $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
                    }
                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);
                return false; //prevents the link from beign followed
            });
        },
        init: function(params){ //sets the initial parameters
            container_div = params.containerDiv; 
            content_div = params.contentDiv;
            return this; //returns the object in order to make it chainable
        }
    }
}()

/* Ajax Content Loading Controls */
$(function(){
        AjaxContent.init({containerDiv:".content_background",contentDiv:"#text"}).ajaxify_links("#nav a");
    });

/* End Ajax Content Loading Controls */

/* End Ajax Content Loading */

1 answer

danwellman 5600
1
point

What I would do is have the loading gif hard-coded in the container that the AJAX content will go into, just something basic like this is all you need:

<img id="loader" src="/path/to/yo/loader-image.gif">

Then, in the function that loads the content (the function with the comment //the callback, loads the content with ajax by it) just hide the image before inserting the content:

$(container_div).find("#loader").hide();
//continue with your code here...

You shouldn't need anything more complex than that really...

Answered over 8 years ago by danwellman
  • Afraid that doesn't work. the loading gif is constantly visible. It needs to only show when the links are clicked then hide when the content is finished loading. Leon Quinn over 8 years ago
  • That's exactly what the above code does? You need to execute the above JS code to hide or remove the loading-image when the content has finished loading. You need to set a callback for the complete-event of your AJAX call. Jens Hedqvist over 8 years ago
  • It just doesn't work and I don't understand what you're saying.. Leon Quinn over 8 years ago