htmx-indicator 指示器在初始页面加载期间显示
我的项目中有一个 htmx 指示器，用于在重新加载页面的一部分时显示。但是，我注意到加载指示器在初始页面渲染期间呈现，然后淡出：
htmx-indicator 不应该一开始就隐藏吗？我需要添加什么来确保它开始隐藏，并且只显示在我的 htmx 负载上？
这是 html 的片段（该项目使用 django 和 bootstrap）（我在调整时将许多样式硬编码在 html 中）：
<div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none;">
<div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
<div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
</div>
</div>
</div>
我没有对默认的 htmx CSS 样式进行调整。
在连接速度较慢和/或 CPU 较弱的情况下，加载和解析/评估 CSS/JS 文件需要一些时间。在本例中，微调器是使用 Boostrap CSS 创建的，但隐藏类元素的类定义.htmx-indicator稍后使用 HTMX 注入，因此直到微调器可见。为了解决这个问题，我们可以手动添加 Bootstrap CSS 内容之前的类定义htmx-indicator，这样当旋转器启动时它就div已经不可见了：
<head>
<style>
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
</style>
<!-- Bootstrap -->
<!-- HTMX -->
</head>
| 归档时间： |
|
| 查看次数： |
1367 次 |
| 最近记录： |