即使导入脚本也无法找到Scrollify函数 [英] Scrollify function not being found even when script is imported

问题描述

因此，我尝试使用Scrollify，这是一个用于滚动捕捉的jQuery插件.我已经将jQuery导入没问题，但是无论我如何导入插件本身，都会收到错误消息:

So I'm trying to use Scrollify, which is a jQuery plugin for scroll snapping. I have jQuery imported no problem, but no matter how I import the plugin itself, I get the error:

Uncaught TypeError: $.scrollify is not a function

在jQuery本身加载之后，我加载了插件脚本 ，在这两个加载之后都加载了配置代码，甚至我将插件的脚本标签和配置代码都放在了最后</body>之前的页面.

I have the plugin script loading after jQuery itself loads, and the configuration code after both of those load, even to the point where I put the plugin's script tag and configuration code at the very end of the page before </body>.

我尝试在本地托管插件脚本，并且尝试使用CDN.两者都给出了相同的问题.

I've tried hosting the plugin script locally, and I tried using a CDN. Both gave the same issue.

我在其他脚本中遇到了这类问题，它们总是由于加载顺序而引起，但我在这里很困惑.有帮助吗?

I've had these sort of issues with other scripts and they always were due to the loading order, but I'm stumped here. Any help?

推荐答案

因此，我在OctoberCMS中构建了自定义主题，并且在遇到相同错误之前，我希望使用scrollify.经过很多努力，切换了JQuery版本并移动了函数，我注意到我的问题与使用Laravel Mix/Webpack导入scrollify代码有关.我在主体顶部有此要求. js文件，但代码本身是在加载之后.

So I am building a custom Theme in OctoberCMS, and I was hopping to use scrollify before running into the same error. After a lot of struggling, switching JQuery versions and moving functions around, I noticed my issue was related to using Laravel Mix/Webpack to import the scrollify code. I had it required at the top of my main.js file, but the code itself was loaded after.

我的解决方案是使用某些十月份的树枝函数在JQuery之后手动加载代码.

My solution was using some October twig functions to load the code after JQuery manually.

// These get loaded first
<script src="{{ [
    'assets/js/app.js', // My JQuery gets loaded here
    'assets/js/vue.js'  // Other JS for the website
    ]|theme }}"></script>
// Scripts in here injected into page by the {% scripts %} tag after, having the 
// scrollify.js in the array above or outside the {% put scripts %} tag would always throw
// $.scrollify is not a function error 
{% put scripts %}
<script src="{{ 'assets/js/scrollify.js'|theme }}"></script>
<script>
    $(document).ready(function () {
        $.scrollify({
            section: ".example-section",
        });
    });
</script>
{% endput %}
{% scripts %}

{％scripts％}标签插入对脚本的JavaScript文件引用 由应用程序注入. https://octobercms.com/docs/markup/tag-scripts

The {% scripts %} tag inserts JavaScript file references to scripts injected by the application. https://octobercms.com/docs/markup/tag-scripts

正如上面提到的答案，需要在页面和Jquery加载后才加载Scrollify，但是如果您使用的是Webpack或同等功能，我建议您在浏览器中检查已编译的脚本，并确保顺序正确.

As the above answers mentioned, Scrollify needs to be loaded after the page and Jquery loads, but if you are using Webpack or equivalent I would suggest checking the compiled scripts in your browser and making sure they are ordered correctly.

这篇关于即使导入脚本也无法找到Scrollify函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！