Optimizing hide() function for large data-driven pages

Optimizing hide() function for large data-driven pages

Hello folks,

I have a problem I can't seem to solve.

Basically I'm dealing with lots of data that's hidden by default when the page loads. They are shown based on user input elsewhere. Ex:

  1. $(document).ready(function() {
  2.         $("#div1, #div2, #div3").hide();
  3. });
  4. <div id="div1">....lots of data....</div>
  5. <div id="div2">....lots of data....</div>
  6. <div id="div3">....lots of data....</div>

The problem is that often these DIVs get displayed for a short period during page load until the ready() function kicks in and hides them. I understand jQuery's waiting for the page to load completely before initiating the hide() function. But this is creating a lot of confusion amongst the users of my site and I can't seem to find a way to solve it.

Can you tell me how I can restrict displaying large data driven pages until they are completely loaded?

Best regards,
Ramappa