加载选项卡式内容的最佳方式

I'm working on changing member profile UI on one site. Project page: http://design.vitalbmx.com/user_menu/member_profile2.html

我正在努力在一个站点上更改成员个人资料用户界面。项目页面：http：//design.vitalbmx.com/user_menu/member_profile2.html

Goals:

目标：

Usability: page load time must be optimized, especially images in the active tab SEO: pagination links within tabs must be crawlable

可用性：必须优化页面加载时间，尤其是活动选项卡中的图像SEO：选项卡中的分页链接必须是可抓取的

Assumptions:

假设：

• Most users will go to "All" tab by default
• 大多数用户默认会转到“全部”标签
• Most users will rarely click other tabs except "All"
• 大多数用户很少会点击“全部”以外的其他标签
• Most users will not send links to paginated tabs, only to 1st page of any given tab
• 大多数用户不会发送指向分页选项卡的链接，只会发送到任何给定选项卡的第一页

Implementation scenarios:

实施方案：

1. Content of all tabs is loaded at once on the same page. Pagination via Ajax (with URL's to existing pages for crawlers). Possible issues - lag for loading images for tabs other than first tab if it's set in page URL (e.g. #videos)

   所有选项卡的内容在同一页面上一次加载。通过Ajax进行分页（使用URL到爬虫的现有页面）。可能出现的问题 - 如果在页面网址中设置了第一个标签以外的标签，则加载图片时滞后（例如#videos）

2. Content of first tab ("All") to load first. Load content of other tabs only when they are clicked. Issues - extra HTTP calls and also lag for loading images for tabs other than first tab

   要加载的第一个选项卡（“全部”）的内容。仅在单击其他选项卡时加载其他内容。问题 - 额外的HTTP调用以及为第一个选项卡以外的选项卡加载图像的延迟

3. Content of all tabs is loaded on the same page BUT image sources are replaced with a generic image for tabs other than current tab before images begin loading. When another tab is clicked (or after current tab images are loaded) image sources are reverted to original and begin loading (somewhat like Mashable.com but without the annoying fade-in effect)

   所有选项卡的内容都加载在同一页面上。但在图像开始加载之前，图像源将替换为当前选项卡以外的选项卡的通用图像。单击另一个选项卡时（或加载当前选项卡图像后）图像源将恢复为原始并开始加载（有点像Mashable.com但没有恼人的淡入效果）

4. Ajax-less - dedicated page for each tab. Makes more sense for SEO than for usability. Easy to copy-paste-send URL's with pagination.

   无Ajax - 每个选项卡的专用页面。对SEO而言比对可用性更有意义。易于复制粘贴 - 发送带有分页的URL。

Which one would be the best? Or am I missing something?

哪一个最好？或者我错过了什么？

1 个解决方案

#1

I think you should go with no. 4, because that one uses less load from server and client.

我想你应该没有。 4，因为那个使用来自服务器和客户端的负载较少。