[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?