For 3000 divs and a lot more in the future, then I recommend you do an AJAX to load the content when the user scrolls down.
Examples: Slashdot (slashdot.org) Google Reader I know there are jQuery plugins to help you load on scroll, please Google. Good Luck, William Chang http://www.williamchang.org http://www.babybluebox.com On Sep 28, 10:54 am, Raymond Ho <rym...@gmail.com> wrote: > 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.
