用于多功能和可重复使用的骨架装载机的裸露方法

有效的加载指示器，例如旋转器和骨架加载器，可以显着改善页面加载时间的用户体验。尽管旋转器易于实现，但骨骼装载机虽然可能更复杂，但在特定方案中提供了卓越的体验。许多现有的骨骼加载器实现缺乏可重复性和可扩展性，通常是针对单个组件量身定制的。本文提出了一种更有效，可重复和可扩展的方法。

旋转器与骨架装载机

旋转器（或进度条）是最常见的加载指标，它提供了一种正在进行的视觉提示。但是，他们提供有限的参与度；用户被动等待，无法与其他页面元素进行交互。相反，骨架装载机（或骨架屏幕）提供了更活跃的等待体验。他们使用代表最终内容的占位符（彩色框），提供进度感和更快的加载速度。

至关重要的是，加载组件不应掩盖潜在的性能问题。首先优化资产和后端流程；当延迟不可避免并且不是由于可解决的性能问题而引起的，加载元素是最后的手段。

有效使用骨架装载机

骨架装载机不应替换全屏装载机，但最好在特定条件下使用：

可避免的延迟？

优先考虑性能优化以最大程度地减少加载延迟。骨骼装载机仅在延迟确实不可避免的情况下适合。

用户启动的加载？

对于触发加载的用户操作（例如，懒惰图像），为加载元素提供反馈。没有它，用户就不知道背景过程。

一致且可预测的布局？

骨架装载机在可预测的内容布局中最有效。如果骨骼与最后的布局不相似，那么突然的变化可能会令人震惊。

立即可用的内容？

当某些内容立即可见而另一些内容不同步时，骨架装载机最有效。这保持了进步感。仅用骨骼装载机填充的屏幕没有任何初始内容并不比全屏旋转器要好得多。

建造强大的骨架装载机

许多骨架装载机示例被过度设计。本文提倡一种简约的方法，以方便实施，重复使用和维护。

卡网格示例

使用HTML，CSS和JavaScript，简单的六张卡片将展示异步加载。每张卡都使用占位符图像（ <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="用于多功能和可重复使用的骨架装载机的裸露方法"> ）确保可见骨骼直到图像加载为止。

骨架装载机样式

而不是创建单独的骨架组件，而是利用现有的布局样式。 .loading 。

 .loading .loading-item {
  背景：＃949494！重要； / *可自定义的骨架加载器颜色 */
  颜色：RGBA（0，0，0，0）！
  边界色：RGBA（0，0，0，0，0）！
  用户选择：无；
  光标：等等；
}

.loading .loading-item * {
  可见性：隐藏！重要；
}

.loading .loading-item：空::之后，
.loading .loading-item *：empty :: after {
  内容：“ \ 00A0”;
}

此方法从主要组件样式继承了布局，用实心框代替内容。 .loading-item类可确保布局保存。

多行内容和布局变化

要解决因内容长度而引起的布局偏移，请使用<br>占位符中的标签以模拟多行。这继承了相关的CSS属性以进行准确的尺寸。

可访问性注意事项

可访问性至关重要。

对比

建议使用高对比度的骨骼装载机，以提高可见度，并遵守WCAG指南。 prefers-contrast媒体查询（当得到广泛支持时）可以提供进一步的自定义。

动画

尊重用户偏好，以prefers-reduced-motion动作，以便在必要时禁用动画。

屏幕读取器

使用ARIA属性，例如aria-hidden和视觉隐藏的文本，为屏幕阅读器提供上下文。例如： <div> <span style="display:none;">Loading...</span><img aria-hidden="true" ... alt="用于多功能和可重复使用的骨架装载机的裸露方法" > </div> 。

结论

这种极简主义的方法创建了多功能，可重复使用的骨架加载程序，从现有样式继承了布局，仅替换内容。这可以提高可维护性和可伸缩性。优先考虑可访问性确保所有用户的包容性。

以上是用于多功能和可重复使用的骨架装载机的裸露方法的详细内容。更多信息请关注PHP中文网其他相关文章！