If there's a need to selectively show particular elements out of a
large number, something to try while experimenting with performance
improvements is to construct a CSS block dynamically and then update
it. You'd put together the CSS as a stream of "#randomDiv0021 {
display: block; }" CSS statements, and then just jam the whole thing
into a <style> block (which you can access by "id" attribute. I know
that you have to update style blocks with a particular function in IE
(Firefox lets you use "innerHTML" pretty much anywhere, but IE will
throw an "unknown error" exception); it may be "innerText" or
"cssText" or something like that. Perhaps jQuery deals with that for
us.
Building and updating a CSS block en masse may or may not be faster
than explicit calls to show() and hide(). If you do build a CSS block,
make sure you do it by constructing an array of strings and then
joinging it together rather than repeatedly appending to a single
accumulating string.
On Sun, Sep 27, 2009 at 1:56 PM, Michael Geary <m...@mg.to> wrote:
>> 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.
>
> That's because the browser doesn't refresh the page while JavaScript code is
> running. It waits until all your code finishes running and then refreshes
> with all the changes you've made.
>
> If you want to see partial results, use setTimeout() to delay part of your
> code:
>
> doOneThing();
> setTimeout( function() {
> doAnotherThing();
> }, 1 );
>
> Now you will see the results of doOneThing() immediately, before
> doAnotherThing() is called.
>
> Mike M's tip sounds good for hiding and showing all your divs, but I think
> that leaves the problem of hiding and showing a subset of them according to
> your filter. I don't have any ideas for you on that, though - I'd have to
> see a test page to get a better idea of what it's doing.
>
> -Mike
>
> On Sat, Sep 26, 2009 at 10:25 PM, Sid <nikhil...@gmail.com> wrote:
>>
>> 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.
>
>
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
