I'm working on a unidirectional carousel that makes ajax calls to load
more elements to be displayed.
In my "pane", I'm displaying 4 elements (of class .item) in a queue
(called .my_queue).
| [] [] [] [] | {} {} {} {} () () () ()
When the user clicks a MORE button, the elements move to the left and
the next set of elements slide over. I also make an ajax call to
append more elements to the back of the list. As of right now, the
elements being loaded could be "indefinite".
[] [] [] [] | {} {} {} {} | () () () () ...........
Since I don't need to go backwards or see previous elements, is there
value in simply removing the ones that have moved off the left side of
the page?
I'm doing the following right now to test this out:
$(".my_queue").animate({ left: -setWidth }, 2000, function() {
$(".item").slice(0,itemsPerSet).remove();
$(".my_queue").css("left", 0);
});
loadNewItems();
So, after I animate, I remove the last number of items moved off
screen and shift the queue back into the correct position. Then I load
new items which appends more ".item" elements to my page.
During my testing, this solution "mostly" works. However, the behavior
is different on different browsers.
Safari (Mac/Win): Silky smooth
Firefox Mac: a "glitch" during the process and there's a brief flash
before everything is in the proper place.
Firefox Win: more or less works but not as smooth as Safari
IE6: silky smooth if static; however, when loading and appending new
elements, it's atrociously slow.
IE7: more or less works and fairly "silky".
At any rate, if anyone has opinions or a better way to do this then I
would appreciate the input.
Thanks,
victor
