3000 divs are freaking huge. it would be better to do it in ajax and
load them by chunks instead of putting it all in one huge HTML page.
On Sep 28, 6:17 pm, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
> 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.
