首先我必须说,我不是一个专业的程序员,而是一个从实践中学习的设计师。因此,如果可能的话,恐怕我需要简单的解释。
我在特定脚本的帮助下使用 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();
}
修改后的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");
到目前为止,感谢安德鲁,一切都工作得很好,除了我在我的开发工具(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 文件的技巧在哪里?有任何想法吗?非常感谢你的建议
加拉瓦尼
@Jamie
编辑:
所以,你好杰米!我对你的解决方案很好奇,所以我放弃了其他一切并尝试了它。遗憾的是,它在我试图在此编辑上方的行中尽可能准确地解释的情况下不起作用。
为了避免任何误解,我按照您的指示更改了代码(顺便说一句,解释得很好!):
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 中的所有内容时,至少它可以正常工作,而不会显示有关新插入行的错误。但我没有结果。然而,那就太酷了!
我错过了什么?您真的彻底检查了我在上面几行中所做的事情吗?
我很想听听你的想法!
到目前为止,感谢您的兴趣并愿意分享您对这种复杂边缘材料的知识(没有太多讨论 - 我想有充分的理由 - 在堆栈溢出中)。