My page content loads using a jQuery script - http://www.reverbstudios.ie/scripts/nav.js

I'd like to know how to show a loading gif when a page link is clicked and automatically hide it again when the content loads?

Adding $(container_div).find("#loading").hide(); to the above script doesn't seem to work but maybe I have it in the wrong place or done something else wrong. No expert.

Thanks.

3 answers

Behzad 20
0
points

it seems you need to add $(container_div).find("#loading").hide(); below this line :

$(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
$(container_div).find("#loading").hide();
Answered over 8 years ago by Behzad
  • Doesn't make a difference. Loading gif still showing on site load then hiding completely when clicking links instead of showing briefly while content loads. Leon Quinn over 8 years ago
Behzad 20
0
points

because you hide it before contents start loading, try this:

function(){ // the callback, loads the content with ajax
         $(container_div).find("#loading").show();   /*<------ change .hide() to .show() in this line */
         $(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
                    $(container_div).find("#loading").hide();     /*<------  .hide() it here */
Answered over 8 years ago by Behzad
  • Sorry, it still doesn't work as you can see www.reverbstudios.ie Leon Quinn over 8 years ago
  • I think there needs to be some code around the click function no? Leon Quinn over 8 years ago
Behzad 20
0
points

It's because of the loding animation is inside the container_div and become hidden each time you click links:

$(container_div).animate({opacity:0}, //Turn the opacity to 0

I've changed container_div to content _div in some lines to hide and show only the "#text".

try below code, it should works fine :)

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(content_div).animate({opacity:0}, //Turn the opacity to 0
                    function(){ // the callback, loads the content with ajax                        
                        $(content_div).load(url, //only loads the selected portion
                        function(){                        
                           $(content_div).animate({opacity:1}); //and finally bring back the opacity back to 1
                           $(container_div).find("#loading").hide();                           
                    }
                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                $(container_div).find("#loading").show();
                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
        }
    }
}()
Answered over 8 years ago by Behzad
  • That doesn't work either sorry! I've reverted back to a previous version of the code and if you look at Reverbstudios.ie/scripts/nav.js and Reverbstudios.ie now you'll see it works but only once! On first click of any link it's fine but on subsequent clicks the loading gif doesn't show... Leon Quinn over 8 years ago
  • strange! I check it in local and works fine! could you check it with hard refresh (Crtl+f5) again, maybe you have a cash problem. Behzad over 8 years ago
  • Tried refreshing the cache already. Here's the problem - http://screencast.com/t/94nVc7HrUHSj Leon Quinn over 8 years ago