Question

我正在尝试使用ScrollMagic的这个特定动画

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

但是正确加载文件非常困难。我试图包括ScrollMagic，GSAP和GreenSock，但不知何故，ScrollMagic要求我先前加载GASP并且GSAP说主模块丢失并要求我自己加载ScrollMagic。我正在使用jQuery执行异步操作，如下所示

$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
    $.getScript( "http://localhost/icons/scroll.js", function( data, textStatus, jqxhr ) {
        $.getScript( "http://localhost/icons/greensock.js", function( data, textStatus, jqxhr ) {
          //whatever
        });
    });
});

当gsap是第一个时，它会记录我的错误：

错误：找不到ScrollMagic主模块。请做出来确定它在此插件之前加载或使用异步加载器之类的 requirejs错误：找不到TweenLite或TweenMax。请做出来确保在ScrollMagic之前加载GSAP或使用异步加载器喜欢requirejs。

这个当在gasp之前加载scrollmagic

时

错误：找不到TweenLite或TweenMax。请确保GSAP 在ScrollMagic之前加载或使用异步加载器之类的 requirejs。

之前有没有人遇到过同样的问题？你有一个可行的例子来展示吗？如何解决此加载问题并使示例正常工作？

Answer 1

实际上你在这里混淆了名字并且说实话：你重命名js文件并没有帮助。

所以让我们理顺：

ScrollMagic main module 通常为ScrollMagic.js，在您的情况下，我猜测scroll.js。
这是ScrollMagic的主库文件，如果使用同步加载，应该在所有其他ScrollMagic插件之前加载。

GSAP 通常是TweenMax.js（取决于版本），在您的情况下，我猜测greensock.js。
这是 G reen S ock A nimation P latform，它可以提供TweenMax， TweenLite，TimelineMax和TimelineLite个对象（可能是其他对象）。

ScrollMagic GSAP Plugin 通常为plugins/animation.GSAP.js，在您的情况下，我猜测gsap.js。
这是一个ScrollMagic插件，可以将GSAP与ScrollMagic一起使用。它有点像它们之间的桥梁。

现在，因为ScrollMagic GSAP Plugin需要加载ScrollMagic库和GSAP库，因此它可以作为桥梁使用。
所以加载它们的正确顺序是

ScrollMagic
GSAP
ScrollMagic GSAP插件

或

GSAP
ScrollMagic
ScrollMagic GSAP插件

为了避免这些问题，我首先建议永远不要重命名javascript库文件。虽然如果你单独工作可能会好起来，但对其他人来说会很困惑。

其次，如果您使用同步加载，请不要使用JavaScript加载它们使用html标签，这使得他们的加载顺序更加明显您在脚本中所做的事情根本不是异步的，因为您的脚本会一个接一个地加载一个文件，而不是同时加载。

如果要管理js中的加载，请使用异步加载器，如require.js（如错误消息中所示）。

使用require.js，您不必关心加载文件的顺序，因为这是自动处理的。如果你绝对想要，你甚至可以重命名库文件（虽然我不推荐），因为同事会在你的requirejs配置中获得一个参考，看看哪个模块在哪个文件中。

Answer 2

好的，我来到这里寻找CDN链接......在这里，对于其他想要相同的人，它们的顺序正确....这些是ScrollMagic演示工作所必需的。

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>

ScrollMagic未正确加载

2 个答案: