Thanks, guys.
Michael G., your solution worked like a charm. setTimeout seems to
mess with the context ("this" is not recognized within the function).
But that was a minor problem. I just assigned "this" to a global
variable and used that variable inside setTimeout's function. A couple
of other solutions were discussed here:
http://stackoverflow.com/questions/1267275/jquery-show-is-delayed-in-internet-explorer-chrome
I also liked the approach of using show()'s callback function: $
('#foo').show( 0, function() { doOtherThings(); } );
Mike M.,
Interesting suggestions to use CSS. But even with the CSS approach, I
doubt if performance will be any better. Looping through each of the
3000 divs and calling $(this).show() or $(this).addClass('showing')
will probably take the same amount of time.
What I ended up doing (and it did speed things up) is not use jQuery
for hide/show. I now store basic info about all 3000 entities in a JS
object { ent0 : { property1 : 'abc', property2 : 'xyz' }, ent1 :
{ prop1: '123', ..},..}. The HTML for each div is similar, so I just
generate a whole new HTML with only the entities I want to show. Then
replace the existing HTML with the new HTML.
On Sep 27, 2:07 pm, Mike McNally <emmecin...@gmail.com> wrote:
> 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.
