Render optionally needed content only when needed on dynamic JS page

I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.

My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.

My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to lo开发者_开发知识库ad unless when it's clicked on?

(Assuming this is what I should do to reduce unnecessary load)

Just don't load it until the link/button/etc. to the tab is clicked.

See also the jQuery tab implementations.

If your back-end is in PHP, you should control what you send to the client from there.

By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.

So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.