jQuery.InstagramFeed显示不正确

Question

我正在尝试使用一个名为'jQuery.InstagramFeed'的库，它允许我在不使用访问令牌的情况下显示用户feed中的图像。所以，我一直在尝试使用它，但是，出于某种原因，它并没有向我展示任何东西。

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

TypeError：$不是函数调用jQuery函数
“未捕获的TypeError：$不是函数”使用Instafeed
现在（2016年06/2016）是否仍有方法不使用访问令牌获取instagram提要？

其中一些确实对我有用，但我一刷新页面，它又消失了。而现在，不管我做什么，我都不能让它再次出现。

我一直在检查开发人员控制台，看看是否有什么问题，我注意到那里总是向我显示这样的消息：

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>

显示Instagram提要的JQuery函数

<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...令我吃惊的是，它是。

我正在检查是否有东西被退回

这应该是这样的

Instagram源正在工作

但这就是它现在表现出来的

Instagram Feed不工作

因为这个问题，我已经被困了一个月了，我真的没有想法了。我还是编程的新手，所以我可能做错了什么…有人能告诉我问题出在哪里吗？

Answer 1

我尝试用您给出的代码示例重新创建提要，它似乎可以按照预期工作

看这里的小提琴

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

在这个屏幕截图中，看起来您有一个不同版本的jQuery加载(3.3.1)，但在这里的示例中，您包含了3.5.1，这表明您包含了它多次。检查项目中是否插入了其他jQuery实例，并删除相应的实例。

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