[jQuery] DOM manipulation slow

[Nick]

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?