开发者

Wordpress ajax pagination

开发者 https://www.devze.com 2023-01-28 17:31 出处:网络
I\'m using this piece of code i found from a tutorial to enable Ajax pagination on my wordpress site. It all works find but i\'d like to enhance it slightly.

I'm using this piece of code i found from a tutorial to enable Ajax pagination on my wordpress site. It all works find but i'd like to enhance it slightly.

At the moment when you click the next page button there is a slight pause where nothing happens. I'd like to display one of the "waiting" type images like this (http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif) but unsure of how i'd do this.

Heres the code i'm using.

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href')开发者_JAVA百科;
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); });
});

Thanks


You need to create the "loading" element, position it correctly with CSS and set to display:none. jQuery's fadeOut and fadeIn functions support specification of callbacks, so you would change the above code to something more like this

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500, function(){
            jQuery("#spinner").show();
    }).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500, function(){
            jQuery("#spinner").hide();
    }); });
});

changing "#spinner" to the id or class of your loading element.

0

精彩评论

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

关注公众号