阻止Adobe Edge preload.js文件加载jquery

时间:2013-12-27 08:55:11

标签: javascript jquery animation preloader adobe-edge

首先,我必须说我不是一名专业的程序员,而是设计师通过实践来学习。所以我担心如果可能的话我需要简单的解释。 我在一个特定的脚本的帮助下使用Edge animate作为网站的一部分(Andrew Trice,见这里:http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/)。我还成功地在我的libs文件夹中存储了1个Edge preload.js文件。在其中我最后引入了一个变量,以便能够一个接一个地加载Edge动画。代码:

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();

}

修改了Adobe 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)中看到我的代码导致每次一次又一次地加载jquery-1.10.2.min.js这样的基本js文件新的动画开始运行,这个文件总结为无穷无尽的数字...我想这不是一件好事。 我甚至理解为什么(至少我相信)所以我在preload结束时删除了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文件的诀窍在哪里?有任何想法吗?非常感谢您的建议 格拉瓦尼

@Jamie

编辑: 杰里,你好!我对你的解决方案非常好奇,我放弃了其他一切并尝试了。可悲的是,它在我尝试在此编辑上方的行中尽可能准确地解释的情况下不起作用。 为了避免任何误解,我的更改后的代码遵循您的指示(顺便说一句非常好的解释!):

edgePreload.js(在我的版本中它没有文件名添加,位于我的“lib”文件夹中,每个新动画都可以通过安德鲁的方法访问 - 见上文!):

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中的all时,它至少可以在不显示有关新插入行的错误的情况下工作。但我没有结果。然而,真是太酷了! 我错过了什么?您是否真的彻底检查了我在上面的初始行中所做的事情?

我很想听听你的想法! 到目前为止,感谢您的兴趣,并愿意分享您对这种复杂边缘材料的了解(没有太多讨论 - 我猜有充分的理由 - 这里是堆栈溢出)。

1 个答案:

答案 0 :(得分:2)

我已经遇到了确切的问题,而且你现在可能已经解决了这个问题,但希望它可以帮助其他人。

1)确保通过选择&#39; HTML&#39;来获取文件。在您的发布设置中,并发布到一个干净的文件夹。

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

3)在顶行window.AdobeEdge.$_ = $;

下方添加此行window.AdobeEdge = window.AdobeEdge || {};

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

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

6)将边缘库(当前aLoader)与jQuery一起添加到站点的头部。


感觉太糟糕了,这让人感到困惑,Adobe Edge的输出代码是用带有腿的卷心菜写的。每个人都在努力奋斗:)