Javascript ScrollMagic加载不正确

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

但是要正确加载文件是非常困难的。我试图包括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或使用异步加载程序 像是安魂曲

而这一次，当scrollmagic在喘息之前加载时

错误：找不到TweenLite或TweenMax。请确认GSAP 在ScrollMagic之前加载或使用异步加载程序，如 安魂曲

---

以前有人有过同样的问题吗？你有一个工作的例子来展示吗？我怎样才能解决这个加载问题并使一个示例起作用？

事实上，您在这里混淆了名称，老实说：重命名js文件没有任何帮助

让我们来澄清一下：

ScrollMagic主模块

通常是

ScrollMagic.js

，在您的情况下，我猜是

scroll.js

这是ScrollMagic的主库文件，如果使用同步加载，则应在加载所有其他ScrollMagic插件之前加载该文件

GSAP

通常是

TweenMax.js

（取决于版本），在您的情况下，我猜

greensock.js

这是GreenSock动画平台，它可以提供

TweenMax

、

TweenLite

、

TimelineMax

和

TimelineLite

对象（以及可能的其他对象）

ScrollMagic GSAP Plugin

通常是

plugins/animation.GSAP.js

，在你的例子中，我猜

GSAP.js

这是一个ScrollMagic插件，可以将GSAP与ScrollMagic一起使用。这有点像他们之间的桥梁

现在因为它是一个桥梁，

ScrollMagic GSAP插件

需要加载

ScrollMagic

库和

GSAP

库。
所以正确的加载顺序是

卷轴魔术

GSAP

ScrollMagic GSAP插件

或

GSAP

卷轴魔术

ScrollMagic GSAP插件

为了避免这些问题，我首先建议不要重命名javascript库文件。虽然如果你一个人工作可能没问题，但这会让其他人很困惑

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

如果您想在js中管理加载，请使用异步加载程序，如（如错误消息中所建议的）

使用require.js，您不必关心加载文件的顺序，因为这是自动处理的。

---

您甚至可以重命名库文件，如果您绝对愿意的话（尽管我不建议这样做），因为同事可以在您的requirejs配置中获得一个参考，以查看哪个文件中有哪个模块。

好的，我来这里是为了找到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>

感谢您对文件名的解释！我实际上重命名了它们，因为我手动创建了js文件，然后复制了内容。我不知道格林斯托克是GSAP的制造商。在出现错误后，我打开了页面源代码并下载了

greensock/

中的js，因此我认为jquery加载是另一回事，它会等待依赖项完成加载，以便下载特定的文件。这不是预料到的吗？因此，如果特定JS文件中的任何代码使用另一个尚未加载的库，并且该库会自动触发，则不会失败。如果您只使用html标记，JS代码所做的基本上就是这样。它们被依次加载。所以你找到了一个更复杂的方法来做同样的事情。这就是同步和异步的基本区别。如果您将它们依次放入html，则在加载文件之前不会发生任何事情，这正是您的代码所模仿的。我建议阅读sync与async加载的比较。假设

a.js

有一个在加载时使用

b.js

触发的函数。还假设

a.js

保存在本地，并且

b.js

使用较慢的cdn和/或比

a.js

大5倍。即使您在

a.js

之前声明了引用

b.js

的脚本标记，

a.js

也将首先加载，其代码将在不存在

b.js

的情况下运行，因此就其他组件而言，它可以是简单的。在正确加载b.js之后，代码将请求（并最终运行）a.js。其他组件将独立运行。我会的。当我测试它时（我打赌它是对的），Victor，我没有在这里进入评论争论，但是你错了：）。如果

b.js

的脚本标记在

a.js

的脚本标记之前，将不会执行

a.js

中的任何内容，直到加载并执行

b.js

为止。（除非您使用asnc标记：）这种行为就是像require.js这样的脚本存在或人们将脚本标记放在DOM底部的全部原因。请相信我……另外，引用我在上面链接的页面：“如果既不存在async也不存在defer：在浏览器继续解析页面之前，将立即获取并执行脚本”