Is it so bad to have heaps of elements in your DOM

Question

I am making a real estate non interactive display for their shop window.

I have kicked jCarousel into doing what I want:

• Add panels per AJAX
• Towards the end of the current set, go and AJAX some new panels and insert them

This works fine, but it appears calling jQuery's remove() on the prior elements cause an ugly bump. I'm not sure if calling hide() will free up any resources, as the element will still exist (and the element will be off screen anyway).

I've seen this, and tried carousel.reset() from within a callback. It just clears out all the elements.

This will be running on Google Chrome on Windows XP, and will solely be displaying on LCD televisions.

I am wondering, if I can't find a reasonable solution to remove the extra DOM elements, will it bring my application to a crawl, or will Chrome do some clever garbage collecting?

Or, how would you solve this problem?

Thanks

Answer 1

Could you reuse old elements instead of removing them and adding new ones ?

Answer 2

I worked out a fix that ended up being very simple!

Simply pass this to the config for jCarousel

itemFirstOutCallback: {
               onAfterAnimation: function(carousel, li, index, state) {
                 if (state === 'init') return;

                 carousel.remove(index); 

               }
            }

Basically, this just removes the list element as soon as it becomes invisible (scrolled into negative overflow: hidden territory, if you will :) )