javascript - 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 第一次出现时，它会记录以下错误:

ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.

这个是在gasp之前加载scrollmagic时的

ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.

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

Answer 1

实际上，您在这里混淆了名称，说实话:重命名 js 文件并没有帮助。

所以让我们解决这个问题:

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

GSAP 通常是 TweenMax.js (取决于版本)，在你的情况下我猜 greensock.js。
这是GreenSock A动画P平台，可以提供TweenMax、TweenLite、TimelineMax 和 TimelineLite 对象(以及可能的其他对象)。

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

现在，因为它充当桥梁，所以 ScrollMagic GSAP 插件 需要加载 ScrollMagic 库和 GSAP 库。
所以加载它们的正确顺序是

1. 滚动魔法
2. GSAP
3. ScrollMagic GSAP 插件

或

1. GSAP
2. 滚动魔法
3. ScrollMagic GSAP 插件

为了避免此类问题，我首先建议不要重命名 javascript 库文件。虽然如果您单独工作可能没问题，但其他人会感到非常困惑。

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

如果你想在js中管理加载，请使用异步加载器，例如require.js (如错误消息中的建议)。

使用 require.js，您不必关心加载文件的顺序，因为这是自动处理的。如果您绝对愿意，您甚至可以重命名库文件(尽管我不推荐这样做)，因为同事会在您的 requirejs 配置中获得引用来查看哪个文件中有哪个模块。