2

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

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984
  • How many elements are we talking about here? If they have no data cleanup is quicker, if they have data/handlers (which you can avoid by using delegate or live) it is a bit different, in terms of what's most efficient. – Nick Craver Jun 16 '10 at 14:05
  • @Nick Craver Thanks for stopping by. If you look at the link in the previous question, you'll see how I implemented the *adding* of new items to jCarousel. I use its own `add()` method. However, if I do a `$('#listing li:lt(5)').remove()` or similar to clean up, it bumps the list up to fill the gap where the previous list items were. Perhaps I could loop through the first 10 or so every AJAX request, get the total height, then set the ul's `padding-top` to be that height (and remove the ones that were in the space). Sounds clunky though. I hope you can offer me a better solution! Thanks again. – alex Jun 16 '10 at 14:13

2 Answers2

1

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

T4NK3R
  • 4,245
  • 3
  • 23
  • 25
  • Maybe, but I am using a third party jQuery plugin an am unsure of how to get it to do that. Do you have any suggestions? – alex Jun 16 '10 at 13:53
1

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 :) )

alex
  • 479,566
  • 201
  • 878
  • 984