ScrollMagic未正确加载

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 ERROR的异步加载器:找不到TweenLite或TweenMax.请确保在ScrollMagic之前加载GSAP或使用像requirejs这样的异步加载器.

这是当在加油之前加载scrollmagic时

错误:找不到TweenLite或TweenMax.请确保在ScrollMagic之前加载GSAP或使用像requirejs这样的异步加载器.

以前有没有人有同样的问题？你有一个可行的例子来展示吗？如何修复此加载问题并使示例正常工作？

Answer 1

实际上你在这里混淆了名字并且说实话:你重命名js文件没有用.

所以让我们理顺这一点:

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

GSAP通常TweenMax.js(取决于版本),在你的情况下,我猜greensock.js.
这是ģ颖小号玉珠甲 nimation P latform,其可以提供TweenMax,TweenLite,TimelineMax和TimelineLite对象(和潜在的其他人).

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

现在因为它作为一个桥梁,ScrollMagic GSAP Plugin需要加载ScrollMagic库和GSAP库.
所以加载它们的正确顺序也是

1. ScrollMagic
2. GSAP
3. ScrollMagic GSAP插件

要么

1. GSAP
2. ScrollMagic
3. ScrollMagic GSAP插件

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

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

如果要管理js中的加载,请使用异步加载器,如require.js(如错误消息中所示).

使用require.js,您无需关心加载文件的顺序,因为这是自动处理的.你甚至可以重命名库文件,如果你绝对想要(虽然我不推荐它),因为同事会在你的requirejs配置中获得一个引用来查看哪个模块在哪个文件中.