开发者

Show Loading Gif on Page Link Click

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

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜