Во-первых, я должен сказать, что я не профессиональный программист, а дизайнер, учусь на практике. Поэтому я боюсь, что мне нужны простые объяснения, если это возможно. Я использую Edge Animate как часть веб-сайта с помощью определенного сценария (автор Эндрю Трайс, см. здесь: http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/ ). Мне также удалось сохранить только 1 файл Edge preload.js в моей папке libs. В нем я в конце ввел переменную, чтобы иметь возможность загружать анимации 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");
Пока что благодаря Эндрю все работает очень хорошо, за исключением того, что я увидел в своем инструменте разработчика (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? Есть идеи? Большое спасибо за совет Garavani
@Джейми
РЕДАКТИРОВАТЬ: Итак, привет, Джейми! Мне было так любопытно ваше решение, что я бросил все остальное и попробовал его. К сожалению, это не работает в ситуации, которую я попытался объяснить как можно точнее в строках выше этого редактирования. Во избежание каких-либо недоразумений здесь мой измененный код в соответствии с вашими инструкциями (кстати, очень хорошее объяснение!):
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, по крайней мере, он работает без ошибок, связанных с новыми вставленными строками. Но у меня нет результата. А ведь было бы оооооооочень круто!!! Я что-то пропустил? Вы действительно тщательно проверили то, что я сделал в своих первых строках выше?
Мне интересно услышать ваши идеи! Спасибо за проявленный интерес и готовность поделиться своими знаниями об этом сложном краевом материале (не так много обсуждалось — я думаю, по уважительным причинам — здесь, в переполнении стека).
