加载无限量的文章(Lazy Load)

时间:2016-09-29 14:48:49

标签: jquery

我找到了一个懒惰加载x个文章的脚本,但如果文章总数每天都在变化怎么办?有没有办法让项目计算集合中的总金额(如果这有意义?)。所以不是999,而是items变量中的特定数字。

问题是我永远不会知道有多少文章被添加到网站上。

这是我的JSFiddle https://jsfiddle.net/robertallenbaker/maezdhe2/4/

$(document).ready(function () {
$('.sidebar-article-entry').hide();
$('.sidebar-article-entry:lt(5)').show();
var items =  999;
var shown =  5;
$('.more-articles-link').click(function () {
    shown = $('.sidebar-article-entry:visible').size()+5;
    if(shown< items) {
        $('.sidebar-article-entry:lt('+shown+')').slideDown();
    }
    else {
        $('.sidebar-article-entry:lt('+items+')').show();
        $('.more-articles-link').hide();
    }
});
});

1 个答案:

答案 0 :(得分:0)

您可以使用slice()。它根据开始和结束索引过滤元素

然后只需比较元素集合的shownlength

  var $entries = $('.sidebar-article-entry'),
      shown = 5;

  $entries.filter(':gt(4)').hide();    

  $('.more-articles-link').click(function() {
    $entries.slice(shown, shown + 5).show();
    shown += 5;
    if (shown >= $entries.length) {
      $(this).hide()
    }
  }); 

DEMO