Wordpress ajax 分页

发布于 2024-10-05 05:09:41 字数 517 浏览 0 评论 0原文

我正在使用从教程中找到的这段代码在我的 WordPress 网站上启用 Ajax 分页。这一切都有效，但我想稍微增强它。

当您单击下一页按钮时，会出现轻微的停顿，没有任何反应。我想显示这样的“等待”类型图像之一（http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif），但不确定我会如何做这个。

这是我正在使用的代码。

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

谢谢

原文

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');
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); });
});

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫儰鉨ミ守葔 2024-10-12 05:09:41

您需要创建“loading”元素，使用 CSS 正确定位它并设置为 display:none。 jQuery 的 fadeOut 和 fadeIn 函数支持回调规范，因此您可以将上面的代码更改为更像这样的内容，

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();
    }); });
});

将“#spinner”更改为加载元素的 id 或类。

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 原文

~没有更多了~