panel with false visiblity vs loading remote content

If i have multiple content that will be displayed after some selection and a click event . For example, if I select item 1 only content 1 is displayed, and if i select item 3 only content 3 is displayed .

Which is better (with regard to page load time):

1) put each content in a separate panel (with visibility = false) . and if it is selected, visibility is set to true .

2) put each content in a r开发者_JAVA百科emote html page, and load it by jquery ajax method if selected .

Thank you .

---

Option 1 would result in a slower initial page load, but no more requests thereafter.

Option 2 would result in a faster initial page load, but also in consecutive page loads when you change panels.

There is actually a 3rd option where you would initially only load panel 1 and than load the other panels in the background with AJAX.

---

Loading by ajax method is scalable, you don't want to hide 100+ items, it makes the page slower. But then again, if there are only a few items, you could go for the first option since it doesn't put as much load on the server.

---

Your terms need to be clarified.

• You are making an asp.net control invisible, and not setting it's css property to invisible. If that is the case, then it really doesn't matter where you store the data. You're still going to have to make a postback (either full or partial) to get the data since you are just rendering the bare minimum. (no hidden panels with information)

• When you say 'remote' html page, do you just mean you're storing the content in a different file on the same server, or do you mean the content is on a remote server? This is the only thing that would affect load time for you. If it is on a remote server, then it will take longer. If it is on another file, it will not be much different than putting that information in the same file.