[jQuery] DOM manipulation slow

[jQuery] DOM manipulation slow


Hi all,
This is my first post here because I can almost always find some help
in Google from someone who has had a similar problem to mine... but
this time is different.
I am using the code from Remy Sharp's gallery slider found here:
http://jqueryfordesigners.com/slider-gallery/
I am loading list items via ajax and then initializing the slider
attached to it.
When I load 50 items or less, the slider works just fine. However, I
need to support the possibility of loading up to 1500 (maybe even
more) list items via ajax. During my tests of 50+ items, the slider/
browser bogs down and barely responds. I have noticed that if I load
1500 list items as part of the initial html (no ajax) it works just
fine. But I have to use ajax to load them so I am stuck. To clarify,
the problem is after the items are loaded, not in the actual ajax call
itself.
Here is my code:
<pre>
function loadCarousel()
    {
     jQuery.get(
     myxmlfile,
     function(xml)
                {
                    myListObject = "";
                    totalLots = parseInt(jQuery('lotDescListTotal', xml).text());
                    listWidth = totalLots*95;
                    $("#lotlist").width(listWidth);
                 jQuery('lotDesc', xml).each(function(i)
                        {
                            var myid = $("lotId", this).text();
                            var mythumb = $("lotThumbFile", this).text();
                            var mytitle = $("lotTitle", this).text();
                            var myLotIsSold = $("lotIsSold", this).text();
                            var myLotRef = $("lotRef", this).text();
                            var myhtml = "<li class='upcominglot' id='" + myid + "'><span
class='lotid'>Lot " + myid + "</span><span class='lotListTitle'>" +
mytitle.toLowerCase() + "</span></li>";
                            myListObject = myListObject+myhtml;
                        });
                     $("#lotlist").append(myListObject); //have also
tried ...html(myListObject);
                     var container = $('#listwrapper');
                     var ul = $('#lotlist');
                     var itemsWidth = listWidth - container.outerWidth();
                     $('.slider').slider({
                     minValue: 0,
                     maxValue: itemsWidth,
                     handle: '.handle',
                     stop: function (event, ui) {
                     ul.animate({'left' : ui.value * -1}, 500);
                     },
                     slide: function (event, ui) {
                     ul.css('left', ui.value * -1);
                     }
                     });
         },
     'xml'
     );
    }
</pre>
I'm not sure I understand why it works if the html is in the initial
load, but not if I load it with ajax. Am I missing something? It's
all in the DOM regardless of when it gets loaded right?