尝试在轮播中显示 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 之前或同时加载，因此它永远不会 'sees' 容器内的图像，它们最终没有正确嵌套并且没有类应用。因此它将其类（光滑初始化和光滑滑块）附加到父容器并且没有正确格式化任何子容器。

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

有没有办法让轮播仅在 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 图片加载后才启动 slick carousel。

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

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

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

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

Trying to display Instagram images in carousel - how do I load the carousel only when the images are done loading?

javascript

jquery

slider

carousel

instagram