jquery.InstagramFeed 显示不正确

Question

我正在尝试使用一个名为 'jquery.instagramFeed' 的库，它允许我在不使用访问令牌的情况下显示来自用户提要的图像。所以，我一直在尝试使用它，但出于某种原因，它没有向我显示任何内容。

我已经研究了几个星期了，我已经尝试了很多这里（以及其他论坛）的许多帖子中提出的解决方案，比如这些个：

TypeError: $ is not a function when calling jQuery function
"Uncaught TypeError: $ is not a function" with instafeed

其中一些确实对我有用，但是当我刷新页面时，它又消失了。现在，无论我做什么，我都无法让它再次显示。

我一直在检查开发人员控制台以查看是否有问题，我注意到它总是向我显示以下消息：

Uncaught TypeError: $.instagramFeed is not a function
at <anonymous>:3:16
at m (jquery.js:2)
at Re (jquery.js:2)
at w.fn.init.append (jquery.js:2)
at Object.<anonymous> (onepage:633)
at Function.each (jquery.js:2)
at percorrerOnepage (onepage:591)
at Object.success (onepage:663)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)

此时，我的代码是这样的：

JQuery 和 jquery.instagramFeed 导入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>

JQuery 显示 Instagram Feed 的功能

<script type="text/javascript">
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        }); 
</script>

这是函数搜索的容器

<div class="instafeed"></div>

因此，在查看了一些关于如何修复此错误的帖子后，我对 jquery.instagramFeed 函数进行了一些更改，目前它是这样的：

<script type="text/javascript">

(function($){
    $(window).on('load', function(){
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        });
    });
})(jQuery);
         
</script>

有了这个，我终于能够让错误消失，但它仍然没有像预期的那样显示。我想也许，它仍然没有被识别为一个函数，所以为了确保一切正常，我检查了控制台上的 jquery.js 和 jquery.instagramFeed ...令我惊讶的是，是的。

Me checking if something is being returned

应该是这样的

Instagram Feed working

但这就是它现在显示的内容

Instagram Feed not working

因为这个问题，我已经卡了一个月了，老实说，我在这一点上没有想法。我对编程还是很陌生，所以我可能做错了什么。有人可以告诉我问题出在哪里吗？

更新 (27/04)

大家好。我仍在努力解决这个愚蠢的问题。我被困在其他项目中，所以我无法正确地专注于此。但是现在我又回来了，我发现了一些奇怪的东西..

你看，每次我一天中第一次访问该网站时，它都会加载提要，但是，一旦我刷新页面，它就会消失，再也不会加载提要。是不是和缓存有关之类的？

As you can see, it's working

但是我一刷新页面它就停止工作了...

Answer 1

我已尝试使用您提供的代码示例重新创建提要，它似乎按预期工作

Check out the fiddle here

<div class="instafeed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<script>
(function($){
    $(window).on('load', function(){
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        });
    });
})(jQuery);
</script>

在 this screenshot 中，您似乎有不同版本的 jQuery 加载 (3.3.1)，但在此处的示例中，您包含了 3.5.1，这表明您是包括它多次。检查您的项目是否有任何其他插入的 jQuery 实例，并删除适当的实例。

这些导入语句的顺序也很重要，因此请确保先 jQuery 加载，然后是 instagram 小部件，最后是您的自定义脚本。

Answer 2

更新

似乎 API 本身有一些问题。我被这个问题困扰了太久，所以不幸的是，我将不得不选择另一个有效的 API。这个太不稳定了，问题多多..

我要感谢所有有用的答案以及在此 post 中提供的所有帮助。

jquery.InstagramFeed 显示不正确

jquery.InstagramFeed not showing properly

javascript

jquery

instagram