防止 Adob​​e Edge preload.js 文件加载 jquery

Question

首先我不得不说，我不是专业的程序员，而是边做边学的设计师。因此，如果可能的话，恐怕我需要简单的解释。 我在特定脚本的帮助下将 Edge animate 用作网站的一部分（由 Andrew Trice 编写，参见此处：http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/）。我还成功地在我的 libs 文件夹中仅存储了 1 个 Edge preload.js 文件。在其中我在最后引入了一个变量，以便能够一个接一个地加载边缘动画。代码：

function setupAnimationView( template ) { 

var $workPage = $("#workPage")

$workPage.empty();
window.AdobeEdge = undefined;
AdobeEdge = undefined;

var viewModel = { workChart: workChart };

var html = Mustache.to_html(template, viewModel)
$workPage.append( html );

//detect if edge is loaded yet
var edgeDetectionFunction = function() {

    if ( AdobeEdge && AdobeEdge.compositions != undefined ) {
        //put a delay here
        var hasComposition = false;

        if ( AdobeEdge.compositions ) {
            //loop to see if the composition is actually loaded
            for ( var key in AdobeEdge.compositionDefns ) {
                hasComposition = true;
                break;
            }
        }

        if ( hasComposition ) {
            setTimeout( function() { 
                $(window).trigger( "animationReady" ); }, 100 );    
            return;

        }
    }
    else if ( AdobeEdge ) {
        window.onDocLoaded();
    }
    setTimeout( edgeDetectionFunction, 100 );
}
edgeDetectionFunction();

}

修改后的 Adob​​e Edge preload.js：

...

   requiresSVG=false;

doDelayLoad=false;
htFallbacks={
};

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"},
{ load: "libs/jquery.easing.1.3.js"},
{ load: "libs/jquery.rotate.js"},
{ load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

loadResources(aLoader, doDelayLoad);

preContent={dom:[
]}
;//simpleContent

dlContent={dom: [
]}
;//simpleContent

//updated paths for loader
//added this so it can be invoked later
window.onDocLoaded = onDocLoaded;

})( "animation_content");

到目前为止，感谢 Andrew，一切都运行良好，除了我在我的开发人员工具 (Safari) 中看到我的代码导致每次加载基本 js 文件，如 jquery-1.10.2.min.js新的动画开始运行，这些文件的总和是无穷无尽的……我想这不是一件好事。 我什至明白为什么（至少我相信），所以我在预加载结束时删除了 aLoader 对象中的相应行。 （当然它们是在我的索引页面的脚本标签中加载的）

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"}, // deleted this one
{ load: "libs/jquery.easing.1.3.js"}, // deleted this one
{ load: "libs/jquery.rotate.js"}, // deleted this one
{ load: "libs/edge.1.0.0.min.js"}, // deleted this one
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

因为我不明白为什么需要多次加载它们。然而，在这样做之后，只有第一个动画运行，第二个不再运行。但为什么？我在浏览器中检查并看到 jquery-1.10.2.min.js 在页面中，那么为什么 Edge 文件不能（或看起来如此）不再使用它？其他的也一样（旋转等）。 我还试图从上面的函数中抑制这两行：

window.AdobeEdge = undefined;
AdobeEdge = undefined;

虽然没有任何结果。 避免重新加载那些基本需要的 .js 文件的诀窍在哪里？有任何想法吗？非常感谢您的建议 加拉瓦尼

@杰米

编辑： 所以，你好杰米！我对你的解决方案非常好奇，所以我放弃了其他所有东西并尝试了它。遗憾的是，在我试图在此编辑上方的行中尽可能准确地解释的情况下，它不起作用。 为了避免任何误解，我按照您的说明更改了代码（顺便说一句很好的解释！）：

edgePreload.js（在我的版本中，它没有添加文件名，位于我的“lib”文件夹中，在 Andrew 的方法之后，每个新动画都可以访问该文件夹 - 见上文！）：

window.AdobeEdge = window.AdobeEdge || {};
window.AdobeEdge.$_ = $;
// Include yepnope
if(!AdobeEdge.yepnope) {…

然后继续：

$(function() { // your insert opening function

(function(compId){

var htFallbacks; …

…
window.onDocLoaded = onDocLoaded;

})( "animation_content");

}); // your insert closure

我的 index.html 包含以下脚本（以及其他）：

<script src="libs/jquery-1.11.0.min.js"></script>
<script src="libs/jquery.easing.1.3.js"></script>
<script src="libs/jquery.rotate.js"></script>
<script src="libs/edge.1.0.0.min.js"></script>
<script src="libs/mustache.js"></script>
<script src="libs/mustacheHelper.js"></script>

我喜欢在我的服务器上托管。 （避免出现不受我控制的版本更新的各种麻烦）

现在我敢于并希望能够从我的 aLoader 箭头中取消这些东西，如下所示：

aLoader = [
// { load: "libs/jquery-1.11.0.min.js"},
// { load: "libs/jquery.easing.1.3.js"},
// { load: "libs/jquery.rotate.js"},
// { load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];     

但是 id t 不起作用（显然由于缺少边缘代码而引发各种错误）。 当我再次替换 aLoader 中的所有内容时，至少它可以正常工作而不会显示有关新插入行的错误。但我没有结果。然而，会太酷了！！！ 我错过了什么？你真的彻底检查了我在上面最初的几行中所做的事情吗？

我很想听听你的想法！ 到目前为止，感谢您对这种复杂边缘材料的兴趣并愿意分享您的知识（讨论不多 - 我猜有充分的理由 - 在堆栈溢出中）。

Answer 1

我遇到了确切的问题，您现在可能已经解决了，但希望它会对其他人有所帮助。

1) 确保通过在发布设置中选择“HTML”并发布到干净的文件夹来获取文件。

2) 使用美化工具（例如http://jsbeautifier.org/）使[filename]_edgePreload.js 文件可读。

3) 将这一行 window.AdobeEdge.$_ = $; 添加到顶行 window.AdobeEdge = window.AdobeEdge || {}; 的下方

4) 找到这一行(function(compId) {（这是加载方法的开始）并用$(function() { 和}); 包装整个方法（这里和页面底部之间的所有内容）

5) 在aLoader 数组中，删除指定如何加载edge 和jquery 的前两个条目。

6) 将边缘库（当前为 https://animate.adobe.com/runtime/4.0.1/edge.4.0.1.min.js）与 jQuery 一起添加到您网站的头部。

---

不要觉得这很混乱，Adobe Edge 输出代码是由一个有腿的卷心菜编写的。每个人都在为此苦苦挣扎:)