提问者:小点点

jQuery.InstagramFeed显示不正确


我正在尝试使用一个名为'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不工作

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


共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小部件,然后是自定义脚本。