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!
精彩评论