Question

我为我的wordpress博客主题创建了一个ajax分页，并且它工作得很好，除了当用户点击下一页链接（分页链接）时整个帖子区域被删除，同时加载下一页内容，我想要相同加载新内容时要维护的容器尺寸，并在此容器的中间显示微调器或加载器

这是代码

$(document).on( 'click', '.pagination a', function( event ) {
event.preventDefault();

page = find_page_number( $(this).clone() );

$.ajax({
    url: ajaxpagination.ajaxurl,
    type: 'post',
    data: {
        action: 'ajax_pagination',
        query_vars: ajaxpagination.query_vars,
        page: page
    },
    beforeSend: function() {
        $('.mg-posts-wrapper').find( 'article' ).remove();
        $('.mg-posts-wrapper .pagination').remove();
        $(document).scrollTop();
        $('.mg-posts-wrapper').append( '<div class="page-content" id="loader">Loading New Posts...</div>' );
    },
    success: function( html ) {
        $('.mg-posts-wrapper #loader').remove();
        $('.mg-posts-wrapper').append( html );
    }
})
})

如您所见，这是发送成功结果之前的输出。在加载内容时删除当前内容并替换为此内容

<div class="page-content" id="loader">Loading New Posts...</div>

现在而不是这个我想创建一个抓取容器高度并将其应用于自身的加载器，或者如果有其他方式我愿意接受建议，我只想要一种方法来改善用户体验并进行转换页面之间更容易。

Answer 1

什么东西可以顺利进行？（CSS3 + jQuery）

var updatePost = function(){
  this.e = false;
  
  this.find = function(selector){
    this.e = $(selector);
    return this;
  };
  
  this.fix = function(){ // function to update the height
    this.e.height(this.e.find('.int').height());
    return this;
  };
  
  this.write = function(html){
    this.e.find('.int').html(html);
    return this;
  }
};

// example:
var test = new updatePost().find('.post').write('Food<br/><br/>google!<br/><br/><br/>bar!!').fix();
setTimeout(function(){
  test.write('loading..');
  setTimeout(function(){
    test.write('Food!<br/><br/><br/>').fix();
  },2500);
}, 2500);

.post {
  overflow: hidden;
  transition: 2s;
  background: blue;
}

.post .int {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="post">
  <div class="int">
  
  </div>
</div>

编辑1 这是一个如何应用函数的例子。

var updatePost = function() {
    this.e = false;

    this.find = function(selector) {
        this.e = $(selector);
        return this;
    };

    this.fix = function() { // function to update the height
        this.e.height(this.e.find('.int').height());
        return this;
    };

    this.write = function(html) {
        this.e.find('.int').html(html);
        return this;
    }
};


$(document).on('click', '.pagination a', function(event) {
    event.preventDefault();

    page = find_page_number($(this).clone());

    var updatePage = new updatePost(); // load function
    updatePage.find('.mg-posts-wrapper'); // find element
    if ($('.mg-posts-wrapper .int').length == 0) $('.mg-posts-wrapper').wrapInner("<div class='int'></div>"); // add div INT

    $.ajax({
        url: ajaxpagination.ajaxurl,
        type: 'post',
        data: {
            action: 'ajax_pagination',
            query_vars: ajaxpagination.query_vars,
            page: page
        },
        beforeSend: function() {
            $('.mg-posts-wrapper').find('article').remove();
            $('.mg-posts-wrapper .pagination').remove();
            $(document).scrollTop();
            updatePage.fix(); // fix height page
            updatePage.write('<div class="page-content" id="loader">Loading New Posts...</div>');
        },
        success: function(html) {
            updatePage.write(html);
            updatePage.fix(); // update height!
        }
    })
})

计算当前班级高度并替换为相同高度的另一班级

1 个答案: