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!
加载中,请稍侯......
精彩评论