的JavaScript - instafeed.js - 限制与过滤器

Question

我使用instafeed.js加载从Instagram的一些照片，我有一个加载进设置特定的标签作为过滤器的小功能。就像这样：

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

一切运作良好，但它似乎像限制（在这种情况下12）不加载的照片的限制，但照片的极限来获取搜索标签。

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

有没有办法解决这个问题？在通过过滤器搜索时将限制设置为最大值（60）？

这将是容易，如果限制可以从feed.next（）函数传递，但我还没有找到什么工作的。

任何人都可以帮助我吗？

谢谢。

Answer 1

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

为了维持在调用此行为.next()，你应该在每次进料负荷重置计数器：

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个项目，所以这可能对您的影响不大。