[jQuery] show()ing thousands of divs
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
"clear" the float. The problem is that $("div.mydivclass").show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$("body").append(waitingdiv);//Positioned in the center of the screen
with a wait gif and "Please wait" message
if(appliedfilters.length==0) //No filters. Show all divs
$("div.mydivclass").show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$("div#waitingdiv).remove();
You would expect the "waitingdiv" to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.