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

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

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

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

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

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

 
 
 
IMAGE IN HERE
 
IMAGE IN HERE
 
IMAGE IN HERE
 
 
  

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

 
 
 
 
 
IMAGE IN HERE
 
IMAGE IN HERE
 
IMAGE IN HERE
  

从本质上讲，轮播似乎是在Instafeed之前或同时加载，因此它永远不会“看到”容器内的图像，并且最终没有正确嵌套并且没有应用类。 因此，它将其类（slick-initialized和slick-slider）附加到父容器，并且不会正确地格式化任何子项。

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

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

Answer 1

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

 var feed = new Instafeed({ get: 'user', userId: 3722752, accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716', template: '
', after: function () { $('.instafeed').slick({slidesToShow: 3}); } }); 

例

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/