Question

My question is refering to split the complex page loading to improve the user experience.

Info:

I have a ordinary aspx page, which contains a lot of controls, which perfrom complex and havy tasks. This tasks are prefromed automatically (by default) when the page is loaded. All of those components are splitted in divs and with JQuery hidden and shown based on the active tab. So by tab it hides or shows the group of controls, components etc.
Those controls should stay on the same page and arranged as they are at this moment.

Problem:

The problem with this page is that it gets sometimes very big, and because they perfrom expensive tasks it takes some time to load the page for the first time, so it is bad user experience. So with other words the perfromce is very bad, sometimes it takes up to some minutes to load fully the page.

Question:

How to solve this problem?
I was thinking splitting it in some parts and load those parts on demand, but i don’t know how can I load them later, I don’t have access to loading and the work of those controls, the only I want to do is somehow client side, load those on demand. So at the begin only those controls are loaded which are on the first tab, then if i click tab 2 i’ll load those controls which are assosiated with this tab … etc

But how can I do that, basically mostly client side?
Can i put them in div and say to div, dont load untill is said, and after i say than it perfroms the some sort of page loading again?

Thanks in advance.

Answer 1

You can perform ajax loading on demand and not on page load when another tab is being selected, a sample of how to call server side methods from jquery:

Jquery Ajax Loading image

jquery ajax load certain div