presumably the HTML for these ~3k records are being generated server-
side somewhere - can you not split/group the results before they hit
the browser?
On Sep 28, 3:36 am, Sid <nikhil...@gmail.com> wrote:
> 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-...
> 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.
