Erratic timing of slides with images added via code

[dlong500]

I'm having real difficulty trying to accomplish something that seems like it should be easy.

Essentially, I'm initializing a cycle object in the paused state with loop=1, binding to the cycle-finished event, loading image URLs from a database via AJAX, adding these images to the cycle object, then resuming the slideshow.

The cycle finished event then destroys the cycle object, recreates a new one and starts the above procedure again. However, I'm running into serious problems with erratic behavior of the timing. I'm setting timeouts on individual slides with the data-cycle-timeout option, and these settings are not being observed especially on repeated cycles. Sometimes it almost seems the timing is random.

I've put together a simplified test case that doesn't load anything via AJAX, but simply alternates between two sets of images. See the fiddle here. It's pretty much driving me crazy right now, so any help would be appreciated.

[malsup]

Thanks for taking the time to create a fiddle, that helps quiet a bit. I fixed an issue in cycle2 and tried your page with a slightly different approach which seems to work:

http://jsfiddle.net/malsup/vGjye/

[dlong500]

Thanks for working on this. Your fiddle works fine, but I'm still running into a problem. For some reason your updated method of adding all of the slides at once via $('#imagebox').cycle('add', images ) doesn't seem to like the array being passed to it in my code. It is generating a Uncaught TypeError: Cannot read property 'ownerDocument' of undefined error in jQuery 1.9.1.

It's hard to show this first issue via a fiddle because of how many steps are involved, but here is an overview:

1) the string of images is stored in a field in a MySQL database. It exists as one line per image definition (a newline separating each image. For example the data would be stored like:

<img alt="" src="resources/image1.png" data-cycle-timeout="5000" />
<img alt="" src="resources/image2.png" data-cycle-timeout="400" />
<img alt="" src="resources/image3.png" data-cycle-timeout="5000" />

2) This data is being read from the MySQL database and formatted into XML, and sent to the client page via an XHR request. 3) The resultant data is parsed and each field is stored in an IndexedDB store. At this point the image data is still unmodified (the images are still all together as one string with newlines separating them). 4) I take the string and turn it into an array with the line images = adimages.trim().split("\n"); 5) When I pass that array to the cycle plugin it generates the above error.

So, with that being said, I try to fall back to the method of loading each image individually with a for loop. I don't get an error this way, but now the slideshow doesn't work properly. The cycle-finished event appears to be firing after only the first slide each time. This is reproducible in another fiddle: http://jsfiddle.net/dlong500/vGjye/6/

[malsup]

Did you use the latest Cycle2 plugin when you tried the $('#imagebox').cycle('add', images ) method?

[dlong500]

Yes, I'm using the 20130307 version. I don't really know how to debug that issue because as far as I can tell the array is properly formatted (i.e. I can output the contents to the console, and cycle through the array in a for loop).

I could work around the issue by adding the images individually but then I'm running into the second issue I mentioned.

[dlong500]

Any luck with the second issue I mentioned shown in the below fiddle? http://jsfiddle.net/dlong500/vGjye/6/