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之前或同时加载，所以它永远不会看到＆＃39;容器内的图像最终没有正确嵌套，也没有应用类。因此，它将其类（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

Answer 2

您需要做几件事。首先，在设置Instafeed时需要使用“after”回调函数。这样可确保仅在加载Instafeed图像后启动光滑的轮播。

其次，您需要使用“目标”选项，以便将图像加载到将用于创建轮播的容器中。

var feed = new Instafeed({
    target: 'instafeed'
    after: function() {
        $('#instafeed').slick({
            slidesToShow: 3
        });
    }
});

此外，您需要包含光滑的CSS文件，该文件在您的jsfiddle中不存在。 jsfiddle中的工作示例：http://jsfiddle.net/L0zpwebz/3/

试图在carousel中显示Instagram图像 - 如何在图像加载完成后加载轮播？

2 个答案: