开发者

Show Loading Gif on Page Link Click

开发者 https://www.devze.com 2023-01-31 18:51 出处:网络
I\'m simply trying to show a loading gif, when you click any of 开发者_开发问答the top/main links on my site at http://www.reverbstudios.ie. It kinda works but only for the first click. Subsequent cli

I'm simply trying to show a loading gif, when you click any of 开发者_开发问答the top/main links on my site at http://www.reverbstudios.ie. It kinda works but only for the first click. Subsequent clicks don't show the loading gif.

Here's the code I got from another site, I know very little about jQuery/Ajax/Javascript:

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).find("#loading").show();
                        $(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();                           
                    }
                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                $('#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
        }
    }
}()

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


By looking at your code, I understood that loading div is placed inside containerDiv.

And the following line overrides all the data inside containerDiv. You should try moving the loading div out of containerDiv. And this should fix the problem.

$(container_div).load(url+" "+content_div, //only loads the selected portion

Hope this helps!

0

精彩评论

暂无评论...
验证码 换一张
取 消