Question

我确定这肯定已经得到了解答，但我会问，因为我已经搜索了

我已经实现了instafeed并且它加载了图像，当我点击显示更多时，它会加载下一组图像，然后当我再次单击它时它不起作用

   var loadButton = document.getElementById('load-more');
   var userFeed = new Instafeed({
         get: 'user',
         userId: '???',
         clientId: '???',
         accessToken: '???',
         resolution: "standard_resolution",
         useHttp: "true",
         template: '<a data-fancybox="images" data-caption="{{caption}}" href="{{image}}"><img class="fancybox" src="{{image}}" /></a>',            
         sortBy: 'most-recent',
         limit: 12,
         /*links:false,*/
         target: "instafeed",
         /*after: function() {
         // disable button if no more results to load
         if (!this.hasNext()) {
            loadButton.setAttribute('disabled', 'disabled');
         }
        }*/

    });

    // bind the load more button
    /*loadButton.addEventListener('click', function() {
        userFeed.next();
    });*/


      // bind the load more button
      loadButton.addEventListener('click', function() {
        userFeed.next();
      });

      userFeed.run();

下面是我的HTML

<div id="instafeed" class="row text-center"></div>
    </section>
        <section class="pt-medium pb-medium">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a class="btn default large" id="load-more">Show More</a>
                    </div>
                </div>
            </div>
        </section>

和css

#instafeed {
   min-width: 100%;
   margin: 0 auto;
   overflow: auto;
}
#instafeed img {
   width: 16.5%;
   height: auto;
   display: inline-block;
   padding:2px;
   opacity:0.8;
   filter:alpha(opacity=80);
}

#instafeed img:hover {
   opacity:1;
   filter:alpha(opacity=100);
}
@media screen and (max-width: 468px)
{

   #instafeed img {
      width: 50%;

   }
}

我知道有人会解决它并且可能不是一个问题，但帮助不会有什么伤害

谢谢

instafeed不会在第二次点击时加载所有图片

0 个答案: