试图在旋转木马中显示Instagram图像 - 如何在图像加载完成后加载旋转木马？

Question

我觉得这应该非常简单,但实现它却遇到了难以置信的麻烦.

我正在使用Javascript插件Instafeed将Instagram图像拉入页面 - 这很好用.

图像加载后,我想带它们并将它们放入旋转木马.

我有一个JSFiddle显示这里发生了什么.

生成的文档中应该发生的是:

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

例