javascript - instafeed.js - 使用过滤器进行限制

javascript - instafeed.js - Limit with filters

我正在使用 instafeed.js 从 Instagram 加载一些照片,我有一个小功能可以加载 feed,将特定标签设置为过滤器。像这样:

function generateFeed(category){
   var feed = new Instafeed({
          target: category+'Feed',
          get: 'user',
          userId: 'USERID',
          accessToken: 'TOKEN',
          sortBy: 'most-recent',
          template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
          limit: '12',
          resolution: 'standard_resolution',
          filter: function(image) {
              return image.tags && image.tags.indexOf(category) >= 0;
          },
          after: function(){
            if (!this.hasNext()) {
                $('.load-button').hide();
            }else{
                $('.load-button').show();
            }
          }
        });
feed.run();

$('.load-button').on('click',function(){
        feed.next();
});
}

一切正常,但似乎 limit(在本例中为 12)不是加载照片的限制,而是搜索标签时获取照片的限制.

并且如果在此限制内没有带有该标签的照片,如果此照片存在并带有该标签,则 Feed 也将为空!

有办法处理吗?要在按过滤器搜索时将限制设置为最大 (60)?

如果 limit 可以从 feed.next() 函数传递,那将很容易,但我还没有发现任何有效的方法。

谁能帮帮我?

谢谢。

您应该将 limit 设置设置为更高的值,并手动限制 filter 函数内的最大结果量。

为了在对 .next() 的调用中保持此行为,您应该在每次加载 Feed 时重置计数器:

function generateFeed(category){
  var currentCount = 0;
  var feed = new Instafeed({
    target: category+'Feed',
    get: 'user',
    userId: 'USERID',
    accessToken: 'TOKEN',
    sortBy: 'most-recent',
    template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
    limit: '60',
    resolution: 'standard_resolution',
    before: function() {
      currentCount = 0;
    },
    filter: function(image) {
      // put your real limit here
      var shouldDisplay = (currentCount < 12);

      if (shouldDisplay) {
        if (image.tags && image.tags.indexOf(category) >= 0) {
          currentCount += 1;
        } else {
          shouldDisplay = false;
        }
      }

      return shouldDisplay;
    },
    after: function(){
      if (!this.hasNext()) {
        $('.load-button').hide();
      } else{
        $('.load-button').show();
      }
    }
  });
  feed.run();

  $('.load-button').on('click', function(){
    feed.next();
  });
}

请记住,如果您的 API 客户端在 Sandbox Mode,无论您将 limit 设置为什么,您的通话都限制为 20 个项目,因此这可能影响不大给你。