Как да заредя крайна анимация с AJAX повикване? jquery getScript се проваля

Така че се опитвам да извлека анимация на Edge чрез jQuerys $.getScript(), което е същото като извикването на $.ajax с dataType: скрипт.

Сега, ако включа скрипта със скрипт таг, той работи добре, но когато се опитам да заредя и изпълня скрипта чрез $.getScript() нищо не се случва. (Не получавам никакви грешки и скриптът и подскриптовете се зареждат добре - но нищо не се случва.)

Някой опитвал ли е да прави това преди? Подозирам, че имам проблеми със зареждането му през AJAX, защото Adobe използва yepnope в page_a_edgePreload.js.

Използвах прост пример, който намерих от Adobe Edge за тестови цели. Ако искате да го изпробвате локално - отворете редактор и запазете следното във файл wrapper.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Edge always wanted to be a Wrapper</title>
<style>
    .edgeLoad-PAGE_A { display:none; }
</style>
<script src="edge_includes/jquery-1.7.1.min.js"></script>
</head>
<body style="margin:0;padding:0;">
<H1>WRAPPER.HTML</H1>

<div id="content" class="PAGE_A">
   <p>EDGE animation composition should appear beneath me!</p>
</div>

<script type="text/javascript">
$.getScript("page_a_edgePreload.js", function(data, textStatus, jqxhr) {
   //console.log(data); //data returned
   console.log(textStatus); //success
   console.log(jqxhr.status); //200
   console.log('Load was performed.');
});
</script>
  <!--uncomment script below to see that it works if included regulary -->
<!--<script src="page_a_edgePreload.js"></script>-->
</body>
</html>

След това изтеглете примерния .zip файл от Adobe тук: http://blogs.adobe.com/edge/files/2012/05/an15BootStrapExample.zip

Извлечете следното в същата папка като вашия wrapper.html:

  1. edge_includes папка
  2. page_a_edge.js
  3. page_a_edgeActions.js
  4. page_a_edgePreload.js

РЕДАКТИРАНЕ

Добре, така че опитах да заредя файловете, без да минавам през edgePreloader.js, както беше предложено от Алекс. Получавам достъп до AdobeEdge, но той се връща недефиниран, ако напиша композицията след успешно зареждане на скриптовете:

var comp = window.AdobeEdge.getComposition("PAGE_A");
var stage = comp.getStage();
console.log("Stage: " + stage);

(Опитах това и с функция setTimeout() - все още същият резултат)

Следното работи добре, ако включа скрипта в обикновен <script src="..edgePreloader.js"></script> таг

 setTimeout(function() {
  // Try getting the edge composition after 2 seconds
    var comp = window.AdobeEdge.getComposition("PAGE_A");
    var stage = comp.getStage();
    console.log("Stage: " + stage);
  }, 2000);

Забелязвам, че Adobe използва затваряния на edgePreload.js, изглежда, че трябва да заредя edge.1.5.0.js вътре в това затваряне. Сега се опитвам да разбера кои събития и функции са от съществено значение в това затваряне, за да може да работи.


jquery ajax yepnope adobe-edge
person am_    schedule 27.08.2013    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Вероятно просто искате да заредите файла на Adobe edge директно, вместо да инжектирате друг предварително зареждащ файл вътре в предварително зареждащ файл. Но ако просто искате да заредите нещата асинхронно с предварително зареждане (yepnope например), тогава включването на файла, както сте коментирали, е точно как трябва да работи.

Ако искате да го превключите да използва getScript на jQuery, можете просто да изключите конкретните неща за yepnope. За съжаление файлът за предварително зареждане има куп в него, но мисля, че е шаблонен за Adobe Edge. Това е като нещо, което бихте изключили, когато не сте в пример.

Така че вашата линия, която изглежда така:

$.getScript("page_a_edgePreload.js", function(data, textStatus, jqxhr) {});

Трябва да се промени на това:

$.getScript("edge_includes/edge.1.5.0.min.js", function(data, textStatus, jqxhr) {
  // AdobeEdge should exist now
});

Предварителното зареждане също изглежда, че прави някои тестове на функции и настройва събития. Ако имате нужда от тези неща, можете да ги копирате от дъното на файла. Но ако знаете какво да извикате, за да инициализирате същите неща без предварителното зареждане (което изглежда искате да избегнете), тогава можете просто да заредите другите два файла, които предварителното зареждане изтегля в този пример:

$.getScript("edge_includes/edge.1.5.0.min.js", function() {
  $.getScript('page_a_edge.js', function(){
    $.getScript('page_a_edgeActions.js', function(){
      // window.AdobeEdge should be fully available
    });
  });
});

Точният код вероятно не е съвсем подходящ, за да работите напълно, но трябва да е правилната идея.

person Alex Sexton    schedule 27.08.2013
comment
Сигурно съм бил уморен вчера, защото това, което опитах с bootstrapCallback, не проработи - просто бях забравил да коментирам ‹script src=page_a_edgePreload.js›‹/script› в долната част.. Ще продължа да се опитвам да разреши това. - person am_; 28.08.2013

arrow_upward
0
arrow_downward

Не съм експерт по javascript, но проблемите, които имах с Edge Animate при многократна употреба на един и същ уебсайт, изглеждат поне подобни. Може би мога да допринеса малко с връзка, която намерих и чиито неща използвам, която е следната: http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/ Моята работа (отчасти) е тук: предотвратете зареждането на jquery от файла preload.js на Adobe Edge Също така се чудя защо Edge трябва да зарежда jquery, преди да е готов, дори вече да е в главната страница.

person Garavani    schedule 28.12.2013