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