jliyn : Just Load If You Need, a jQuery method

Let's have a web page with some tabbed content, at least: a long text, a pic gallery and a video gallery.
The page loading could be very slow, so why charge all the content at the same time?

just load if you need

Let's start:
this is a classic html tabbed page made with twitter bootstrap:

Lorem
Pics
Videos



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae porttitor sem.
 Proin vitae gravida lorem. Cras viverra tempus ipsum, lacinia pretium turpis suscipit eget. Phasellus dignissim interdum mauris,
 et dapibus risus viverra ut. Praesent a risus metus. Sed enim orci, commodo vitae pulvinar eget, varius eu ligula. Donec diam felis, porta a convallis vitae,
 ornare congue arcu. Cras ut neque a metus hendrerit porta nec ut nibh. Vivamus commodo, nunc vitae faucibus euismod, quam ante scelerisque enim,
 ac ultrices ante tellus vel ante. Morbi vel nibh a nulla ultrices vehicula vitae at felis. Maecenas sit amet libero sit amet mauris consequat imperdiet.
  ...
  Duis aliquam adipiscing metus nec tempor. Nam cursus elit at erat ullamcorper rutrum. Suspendisse iaculis commodo enim ut pulvinar. 
  


  
  
 


 


 

First, split the content of each DIV with class tab-pane in a html file called as the div id, so in this case:

• lorem.html
• pics.html
• videos.html

So the page code now looks like:

  
Lorem
  
Pics
  
Videos


  

  

  

Look carefully, the link class in the menu is hooked with the div id in the contents, and now them will be hooked with the related html page and loaded only when someone clicks the link; add this 6 lines jquery script:

And the loading time will decrease drastically.

Enjoy.

See here for a demo:

• Classic page with embedded content
• Page with content just loaded if needed
• Download the demo on GitHub