时间戳

首页 > 解决方案 > Instagram API 和 Flickity 未在加载时启动

javascript - Instagram API 和 Flickity 未在加载时启动

问题描述

在我继续之前，我只需要声明我在 JS/JQuery 或开发方面一点也不先进，而且我仍在自学。那就是说！

我开发了一个 JS/JQuery 函数，我一直用它来在我的元素上启动Flickity滑块。基本上，触发滑块所需要做的就是向我的元素添加几个类。这完美地工作，我有它，所以滑块在加载和/或调整大小时启动（例如：如果在类中声明了“移动”、“平板电脑”或“桌面”）。我所有的滑块都在正常工作。

我最近深入研究了如何嵌入 Instagram 提要，为此我使用 Facebook for Dev。和Instafeed.js。我让嵌入部分工作得很好。对于那些不熟悉的人，要使用Instafeed.js启动您的 Instagram 提要，它看起来像这样：

HTML

<ul id="instagram-feed"></ul>

JS

var userFeed = new Instafeed({

  get: 'user',
  userId: 'YOUR_ID',
  limit: 8,
  target: 'instagram-feed',
  resolution: 'low_resolution',
  template: '<li><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a></li>',
  accessToken: 'YOUR_TOKEN'

}); 
userFeed.run();

我遇到的问题是，在我的 Instafeed.js HTML 容器中（对于这个例子，让我们使用上面的：id="instagram-feed"），我已经将我的 Flickity 类应用于目标，除了滑块没有启动加载，并且仅在我调整窗口大小时启动。我相信这是因为我的子元素 ( li ) 在 Instafeed.js 模板中，而不是直接在 HTML 中。

有解决办法吗？我有一些想法，比如创建然后在加载时替换的测试元素，但我不确定如何处理这个问题。

谢谢！

标签： javascripthtmljqueryinstagramflickity

解决方案

推荐阅读