Severe memory leak with clone()

Severe memory leak with clone()


Hi all,
I've just come out of a really annoying issue. I created a slideshow
that works like this:
1. a <div> is appended to the body with a background-image
2. after a timeout, it is cloned and inserted after itself with a
different background-image set via css()
3. the old bg div is removed and the new one shown
(I couldn't change the bg image directly 'cause it has a visible delay
with large images)
Looks simple, right? As this project was a bit complex and I was
already facing issues with IE, I was taking much care to null out all
unused variables and references to DOM elements and jQ objects. But
after I finished it I noticed it would leak. A LOT. Memory usage went
up by 12-15mb with every forward/rewind to the slideshow.
After tinkering around, I managed to get rid of the leak by replacing
var $clone = $el.clone().addClass('preload')
    .css({ backgroundImage: 'url('+curImg+')' })
    .insertAfter( $el );
with
var $new = $('<div />').addClass('bg preload')
    .css({ backgroundImage: 'url('+curImg+')' })
    .insertAfter( $el );
$el was subsequently remove()d, the remaining object put through a
custom discard function (one attempt at a fix) and then nulled.
There was no special reason to clone the element but I would never
guess it would cause a huge memory leak like this. Have I overlooked
something?
I don't have much time in my hands after facing this, but I'll try to
reduce it to a simple test case and post in track asap.
cheers,
Ricardo