我见过其他网站在加载另一页面时，保持当前页面完全可见，同时加载条在屏幕上滚动。也许那个版本值得一试。
8 个赞
我想再补充一点。我注意到 Discourse 与一些使用加载进度条的其他网站之间存在一个显著差异。我比较的三个网站是 https://www.youtube.com、https://github.com 和 https://bookmeter.com。以下是关键差异：
- 正如我在之前的帖子中提到的，这些网站不会将正在替换的内容变为空白页面，而是会在加载新内容之前，让旧内容保持显示在屏幕上（没有淡入淡出等效果）。
- 即使在新页面加载完成后，通常仍有大量内容保留在屏幕上。这些网站的顶部菜单包含更多内容，有时甚至拥有一个次级顶部菜单，根据点击的链接不同，该菜单可能会保留。此外，它们还有侧边菜单，在导航到新页面后有时也会保留。相比之下，Discourse 的顶部菜单非常简洁，只有搜索图标、汉堡菜单图标和用户图标始终保留。
也许将行为改为在新内容准备好之前保留旧内容会奏效。但也有可能效果不佳，因为无论你在 Discourse 中导航到哪里，都有大量内容被替换。
7 个赞
在我的案例中，我使用了分类横幅、标签横幅，以及在主题列表侧边栏中显示分类。Discourse 默认还提供了一些保留顶部或侧边栏的路由，例如用户资料或群组页面。我非常希望在过渡期间保持原有的视图，以避免这些屏幕元素暂时消失，随后又在同一位置重新出现。
7 个赞
是的，这正是我们使用新版 Discourse 滑块主题组件的方式，已经持续大约一周了，我们非常喜欢。我们只是禁用了主体过渡代码，仅使用滑块。
浏览器加载（或重新加载）页面的自然行为已经处理了过渡效果；因此无需额外的代码来实现淡入淡出或清空任何 HTML。这个滑块无需任何额外的页面过渡代码（如淡出、清空等）就能呈现出色的效果，这也是我们在一周内在网站上运行的方式。
感谢提供如此出色的滑块，以及将其作为主题组件进行自定义的能力！
4 个赞
也许你误解了我所写的内容，但我描述的情况并非 Discourse 当前与主题组件配合的工作方式。目前，Discourse 在新内容加载时会将大部分内容显示为空白页面。而我链接的其他网站则在新内容加载时保留当前内容。这两者并不相同。
1 个赞
我非常确定我完全理解你提到的内容，@seanblue（如上所述）。你的表述很简单，在我看来，你的帖子也很容易理解。
如果你注释掉 Discourse 原生滑块主题组件中的 SCSS body 过渡（动画）（顺便提一下，我在一周前通过 fork 修改了这个主题组件，但修改主题组件还有其他方法）。
那么，行为就会像你描述的那样。
在我们的修改版中，当前页面会显示出来，直到新内容加载完成（这仅仅是没有添加任何 body 动画时页面加载的正常行为）。你在当前 Discourse 实验中看到的“淡入淡出”和“空白”现象，是由于一周前发布的该主题版本中的 CSS body 动画代码所致（见下文）。
如果没有 CSS body 动画，加载滑块会按正常流程运行，不会出现 body“空白”或“淡入淡出”，因为该动画是在（原始）主题组件的 CSS 中指定的。大多数网站（正如你提到的）不会为 body 添加额外的动画，这就是为什么你说：
这是“常态”……在从 CSS 中移除 body 动画后就会发生这种情况（我指的是一周前发布的版本，因为我一直在追踪，即 GitHub 显示，我们的修改版本是：
在我们于一周前进行此更改后，滑块看起来很棒（我们的用户也这么说），并且不需要额外的 body 动画（淡入淡出、空白动画等）。
以下是我们在该酷炫滑块的“初始版本”中注释掉的 CSS。这对我们（以及我们的用户）来说效果非常好，因此自让它完美运行后，我们就没有一直关注后续的所有“组合加载器、空白”动画及 body 实验代码变更；除了我在 meta 上看到的实验结果。
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
希望这能帮到你。
5 个赞
啊，我没意识到你用的是修改版/分叉版。我的错。很高兴这个版本对你来说运行良好。希望他们接下来在 Meta 上也尝试这种方法。
6 个赞
@david @awesomerobot 我知道我们就此反复讨论过很多次，但我认为在尝试淡出效果之前，我们应该先试用最初的实现方案（稍作微调）。让我总结一下点击时的可选方案：
- 保留旧内容在屏幕上，待新内容准备好后再切换。
- 渲染“白屏”，待新内容准备好后再切换。
- 过渡到不透明内容（不透明度在 0 到 40% 之间），待新内容准备好后再切换。
在所有这些方案中，我们都确定需要添加一条规则：“如果内容加载超过 2 秒，则显示加载转圈动画”。
方案 (1) 是唯一能最大限度减少过渡状态变化的方案。确实，用户需要一点时间来适应：“嘿，我点击了某个东西，但看起来什么都没发生”。但网络本来就是这样工作的：当你点击超链接时，浏览器并不会渲染白屏或将内容淡出。
方案 (2) 是我们当前的做法，有些人认为它过于生硬，因为这种模式最大的优势之一就是避免了白屏。它只是比旧的加载转圈动画有极微小的改进。
方案 (3) 可能会非常干扰用户，找到合适的透明度很困难。根据我的经验，当我尝试过之后，使用一小时就会感到极度疲劳。
@david 我们已经认真尝试了方案 (2)，现在能否也认真尝试一下方案 (1)，比如为期一周？我认为这可能是最佳选择，因为它能最大限度地减少屏幕上的变化。
9 个赞
这……并不正确。点击时会立即开始显示加载动画。当你点击链接时，请查看浏览器标签页。请注意，在点击或轻触时，图标会_立即_从网站图标切换为加载旋转图标。
5 个赞
抱歉，没错，这正是我想表达的：我们可以在这里模拟出非常接近“标准”的导航体验（例如，在加载时更改标签页图标，或更改标签页文本）。
当你在网站上点击任意链接时，当前页面不会完全变白，也不会变得完全不透明。旧内容会在屏幕上保留一段时间，直到新站点的 DNS 解析完成且内容准备就绪进行渲染。
对我来说，这个组件最大的优势在于减少中间状态。如果我们能通过模拟让它“感觉”像标准的浏览器导航，那就太好了。
12 个赞
别担心。我们确实很喜欢这个滑块（在桌面端稍微调整了几个像素）；但发现完全不需要任何主体动画（如页面空白、淡入/淡出或其他效果）。
滑块已经很好地指示了加载状态；页面会自然地加载和切换，无需添加任何主体过渡 CSS 或额外的加载动画。我们这样运行了大约 8 到 9 天，用户很满意，我也很喜欢。用户并不喜欢“淡入/淡出”动画、“页面空白”动画，也不喜欢“额外的加载动画 + 滑块动画”；不过话说回来，我们的用户通常就不喜欢不必要的动画和额外的网页小工具。
我希望 Meta 团队能将此代码保留为主题组件，或者至少允许站点管理员继续覆盖他们最终确定的任何设置；因为就页面过渡而言，我们的用户喜欢的和其他人喜欢的似乎并不相同。
如有疑虑，“保持温和并赋予站点选择权”是一个不错的做法，我认为。
3 个赞
听起来不错，我已将该组件回退到原始实现。
7 个赞
我觉得“哎呀，两秒过去了，显示一个加载动画”这一点虽然细微，但确实值得加上。
除此之外，我们先看看大家的反馈吧，我认为这很可能就是我们最终要发布的版本。
8 个赞
它应该显示在哪里？是作为某种模态框吗？还是应该在 2 秒后隐藏 #main-outlet 以腾出空间显示加载动画？
4 个赞
我在想，我们是否应该隐藏主出口。我们可能需要调整阈值，2 有点随意，也许是 3、4 或 5？
6 个赞
加载动画将在 2 秒后显示：
12 个赞
这相当不错，如果没有在 2 秒后添加额外的加载层，用户体验会变得很奇怪。这样我们就能兼得两者之利：1. 借助滑块营造出闪电般的速度（我们在这儿有点“作弊”，TBO）。2. 在加载卡住时填补空白（心理过渡）。
干得漂亮！
8 个赞
我刚刚在模拟的慢速网络上测试了一下，2 秒后出现的加载旋转图标确实让我感觉不错。我想再次强调，在桌面端（至少在较大的显示器上），加载进度条几乎不可见。我认为在垂直方向上再增加 2-3 像素会有很大改善。
5 个赞
作为 Discourse 的新用户，我一直关注着这场讨论。我必须说，我对这项非常“现代”的 UX 功能所投入的深思熟虑和辛勤工作印象深刻。抱歉在这里离题……但对于一个使用过多年其他论坛软件的人来说，这场讨论令人赞叹。
请继续保持出色的工作……我喜爱这个功能。
11 个赞
也许我应该提一下，我只是因为以为点错了，所以在第一次点击后（页面正在加载时）又点了一次同一个话题。不过，可能只是需要习惯一下没有加载转圈的情况……
5 个赞