prevent Adobe Edge preload.js file from loading jquery

Question

First I have to say that I am not a professional programmer but designer learning by doing. So I am afraid I need simple explanations if possible. I am using Edge animate as parts of a website with the help of a particular script (by Andrew Trice, see here: http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/ ). I also succeeded in storing only 1 Edge preload.js file in my libs folder. In it I introduced a variable at the end in order to be able to load Edge animations one after another. Code:

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

}

Modified 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");

So far thanks to Andrew everything works very fine except that I saw in my developer tool (Safari) that my code leads to loading the basic js files like jquery-1.10.2.min.js over and over again each time a new animation starts to run and this files are summing up to an endless number… which I guess isn’t a good thing. I even understand why (at least I believed) and so I deleted the respective lines in the aLoader object at the end of preload. (of course they are loaded within the script tag in my index page)

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"}];

because I can’t see why it would be necessary to load them more than once. Yet, after doing so only the first animation runs, the second does not any longer. But why? I checked in the browser and see that jquery-1.10.2.min.js is in the page so why can’t (or seems so) the Edge files use it any longer? The same for the other ones (rotate etc.). I also tried to suppress these two lines from the function above:

window.AdobeEdge = undefined;
AdobeEdge = undefined;

without any result though. Where is the trick to avoid reloading those basic needed .js files? Any ideas? Thank you so much for advice Garavani

@Jamie

EDIT: So ,hello Jamie! I was so curious about your solution that I dropped everything else and tried it. Sadly it does not work in the situation I tried to explain as exactly as possible in the lines above this edit. To avoid any misunderstandings here my changed code following your instructions (very good explanation by the way!):

edgePreload.js (in my version it has no filename addition and lies in my „lib“ folder that is accessed by each new animation after the method by Andrew - see above!) :

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

Then further on:

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

(function(compId){

var htFallbacks; …

…
window.onDocLoaded = onDocLoaded;

})( "animation_content");

}); // your insert closure

My index.html contains the following scripts (among others):

which I like to host on my server. (avoiding all kinds of trouble coming up with versions updates not under my control)

Now I dared and hoped to be able to cancel that stuff from my aLoader arrow as follows:

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"}];

but id t doesn’t work (throwing all kinds of errors obviously based on lacking edge codes). When I replace all in the aLoader again at least it works without showing errors concerning the new inserted lines. But I have no result. Yet, would be soooooooooo cool!!! Did I miss something? Did you really check thoroughly what I did in my initial lines above?

I am curious to hear your ideas! Thank you so far for your interest and willing to share your knowledge of this complicated edge material (not much discussed - for good reasons I guess – here in stack overflow).

prevent Adobe Edge preload.js file from loading jquery

1 Answers