1

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.

Alnedru
  • 2,573
  • 9
  • 50
  • 88
  • 1
    I had similar situation and I have used jQuery tab control which loads the part if you click on that tab. What I had done I have created different pages for different tab. And on click I have user jQuery ".load" method to load that particular page. It has another feature like once the page is loaded while switching the tab it doesn't goes to server rather it show and hide the divs – शेखर Nov 14 '12 at 15:34
  • 1
    If you have things like gridview then you can use jTemplate and jqery together – शेखर Nov 14 '12 at 15:34

2 Answers2

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

Community
  • 1
  • 1
Alex
  • 5,971
  • 11
  • 42
  • 80
0

Move the expensive control load tasks to the relevant tab handlers instead of doing it all on the initial page load. You can do this on the server-side, obviating the unnecessary trip back from the client after the fact.

The performance hit is happening on the server-side with the initial page load. In this case, a client-centric solution won't work - the performance hit has already happened. You could use AJAX but in your case this would probably mean re-writing all your data access logic.

IrishChieftain
  • 15,108
  • 7
  • 50
  • 91