javascript - 尝试在轮播中显示 Instagram 图片 - 如何仅在图片加载完成后才加载轮播？

Question

我觉得这应该非常简单，但在实现它时遇到了难以置信的麻烦。

我正在使用 Javascript 插件，Instafeed , 将 Instagram 图片拉入页面 - 这工作正常。

图像加载后，我想将它们放入 a carousel 中.

我有一个 JSFiddle 显示正在发生的事情 here .

生成的文档应该是这样的:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
  <div class="slick-list draggable" tabindex="0">
   <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
   </div>
  </div>
</div>

相反，这正在发生:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
   <div class="slick-list draggable" tabindex="0">
      <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
   </div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
</div>

本质上，轮播似乎在加载 Instafeed 之前或同时加载，因此它永远不会“看到”容器内的图像，并且它们最终没有正确嵌套并且没有应用类。所以它将它的类(slick-initialized 和 slick-slider)附加到父容器并且没有正确格式化任何子容器。

我试过将 Instafeed 脚本放在头部并在窗口加载时启动它。这没有区别。

有没有办法让轮播仅在 Instagram 照片加载后加载？或者如果不在插件本身中构建回调等，这是不可能的？有没有简单的方法可以做到这一点？任何帮助将不胜感激!

Answer 1

使用after(当图像添加到页面时调用)回调

var feed = new Instafeed({
    get: 'user',
    userId: 3722752,
    accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716',
    template: '<div><a href="{{link}}"><img src="{{image}}" /></a></div>',
    after: function () {
        $('.instafeed').slick({slidesToShow: 3});
    }
});

Example