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

【问题标题】：Trying to display Instagram images in carousel - how do I load the carousel only when the images are done loading?尝试在轮播中显示 Instagram 图像 - 如何仅在图像加载完成后加载轮播？
【发布时间】：2015-03-22 21:52:08
【问题描述】：

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

我正在使用 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 照片加载后加载？或者如果不将回调等构建到插件本身中，这是不可能的吗？有没有一种简单的方法可以做到这一点？任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery slider carousel instagram

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：