试图在carousel中显示Instagram图像 - 如何在图像加载完成后加载轮播？ [英] Trying to display Instagram images in carousel - how do I load the carousel only when the images are done loading?

问题描述

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

I feel like this should be incredibly simple but am having unbelievable amounts of trouble implementing it.

我正在使用Javascript插件 Instafeed 来推动Instagram图像进入页面 - 这工作正常。

I am using a Javascript plugin, Instafeed, to pull Instagram images into a page - this is working fine.

图像加载后，我想把它们放入旋转木马。

After the images have loaded, I want to take them and put them into a carousel.

我有一个JSFiddle显示正在发生的事情这里。

I have a JSFiddle showing what is happening here.

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

What should be happening in the generated document is this:

<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>

相反，这种情况正在发生：

Instead, this is happening:

<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）附加到父容器，并且不会正确地格式化任何子项。

Essentially, the carousel seems to be loading before or at the same time as Instafeed and so it never 'sees' the images inside the container and they end up not nested properly and not having classes applied. So it appends its classes (slick-initialized and slick-slider) to the parent container and doesn't format any of the children correctly.

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

I have tried placing the Instafeed script in the head and starting it on window load. This makes no difference.

有没有办法让Instagram的照片加载时只能加载轮播？或者，如果没有将回调等等构建到插件中，这是不可能的？有一个简单的方法吗？任何帮助将不胜感激！

Is there a way I can make the carousel only load when the Instagram photos have loaded? Or is this not possible without building callbacks etcetera into the plugins themselves? Is there a simple way to do this? Any help would be appreciated!

推荐答案

在之后使用（在图像添加到页面时调用）回调

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

示例

这篇关于试图在carousel中显示Instagram图像 - 如何在图像加载完成后加载轮播？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！