Dynamic Photo Load Lag

Question

Hello,
I am trying to dynamically populate a cube ad with photos and text from a json file.  The fields that are populated are photo, title, desc and price.  When I initially created the ad I had a photo and 3 text fields.  After a 5 second animation, the count would increase by 1 and all fields would be repopulated.  When I tested this the text worked perfectly but there was a lag in the photo switch.  My solution was to create a second set of fields to run the following way:
Slide A (visible): Photo, Title, Desc, Price
Slide B (hidden): populated with the next Photo, Title Desc, Price
5 second animation, then switch
Slide B (Visible)
Slide A (hidden) repopulated with the next Photo, Title, Desc, Price
5 second animation, then switch
Loop back to the top...
This set-up works through the first run through but then the photo starts lagging again.
Can anyone help me solve the lag issue?  Below is my compositionReady stage code. I will also include a zip of my project.  I moved Slide B 300px to the right and took out the hide functions so I could see what was happening behind the scenes.  I also included some helper text fields to show what functions are being called while it is running.
compositionReady Code:
//Variable
imageCount =     0;
//JSON
$.getJSON("slides.json", function(data){
    loadDataA(imageCount);
    // Load Data A
    function loadDataA(i) {
    sym.$("notification1").html("loadDataA");
        sym.$("photo").empty();
        sym.$("photo").attr("src", data[i].image);
        // Populate text A
        sym.$("title").html(data[i].title);
        sym.$("desc").html(data[i].desc);
        sym.$("price").html(data[i].price);
        sym.$("notification5").html("photo image = " + data[i].image);
    // Load Data B
    function loadDataB(i) {
    sym.$("notification1").html("loadDataB");
        sym.$("photo2").empty();
        sym.$("photo2").attr("src", data[i].image);
        // Populate text A
        sym.$("title2").html(data[i].title);
        sym.$("desc2").html(data[i].desc);
        sym.$("price2").html(data[i].price);
        sym.$("notification6").html("photo2 image = " + data[i].image);
    function hideAshowB() {
    sym.$("notification2").html("hideAshowB");
         sym.$("photo").empty();
        //sym.$("photo").hide();
        //sym.$("title").hide();
        //sym.$("desc").hide();
        //sym.$("price").hide();
        sym.$("photo2").show();
        sym.$("title2").show();
        sym.$("desc2").show();
        sym.$("price2").show();
    function hideBshowA() {
    sym.$("notification2").html("hideBshowA");
        sym.$("photo2").empty();
        //sym.$("photo2").hide();
        //sym.$("title2").hide();
        //sym.$("desc2").hide();
        //sym.$("price2").hide();
        sym.$("photo").show();
        sym.$("title").show();
        sym.$("desc").show();
        sym.$("price").show();
      function animateSlideshowA() {
      sym.$("notification3").html("animateSlideshowA");
        sym.$("title").animate({x: 9}, 5000, function() {
        sym.$("notification4").html("insideSlideshowALoop");
                    imageCount++;
                    if (imageCount >= data.length) {
                        imageCount = 0;
                    loadDataA(imageCount);                  
                    hideAshowB();                   
                    animateSlideshowB();
      function animateSlideshowB() {
      sym.$("notification3").html("animateSlideshowB");
        sym.$("title2").animate({x: 309}, 5000, function() {
        sym.$("notification4").html("insideSlideshowBLoop");
                    imageCount++;
                    if (imageCount >= data.length) {
                        imageCount = 0;
                    loadDataB(imageCount);
                    hideBshowA();                 
                    animateSlideshowA();
    loadDataA(imageCount);
        imageCount++;
        loadDataB(imageCount);
        animateSlideshowA();
www.capitalpress.biz/html5ads/cubes/nyssatractor/NyssaDynamicTest.zip
Thanks for your help,
Brandon

Answer 1

Hi,
So, here is an Edge solution using a symbol ("animateAds"). Basic approach is to create a collection and browse it.
Collections are:
a) the json file.
b) sym.createChildSymbol("animateAds","slider") ==> it creates your ads collection.
c) sym.getChildSymbols() ==> it returns the ads collection created by 2).
I also use a global variable ( sym.setVariable("index") ) to play each ad. So: a counter.
1) Creating the symbol:
2) Animating the symbol (one ad):
==> the demo file to download: Nyssa.zip - Box
It's an infinite loop. You can add events (click, swipe).
Note: i change the json file to browse an object.
At last but not least: i tested on Apple (OS X Mavericks and iOS 7.1.2) and on Microsoft (Windows 8.1 update 04/18 with IE 9,10,11).
Ask me if you don't understand code. 2 main steps: creating ads (panel: creationComplete) and playing ads (trigger panels: at 0 and 5000).