用於多功能和可重複使用的骨架裝載機的裸露方法

有效的加載指示器，例如旋轉器和骨架加載器，可以顯著改善頁面加載時間的用戶體驗。儘管旋轉器易於實現，但骨骼裝載機雖然可能更複雜，但在特定方案中提供了卓越的體驗。許多現有的骨骼加載器實現缺乏可重複性和可擴展性，通常是針對單個組件量身定制的。本文提出了一種更有效，可重複和可擴展的方法。

旋轉器與骨架裝載機

旋轉器（或進度條）是最常見的加載指標，它提供了一種正在進行的視覺提示。但是，他們提供有限的參與度；用戶被動等待，無法與其他頁面元素進行交互。相反，骨架裝載機（或骨架屏幕）提供了更活躍的等待體驗。他們使用代表最終內容的佔位符（彩色框），提供進度感和更快的加載速度。

至關重要的是，加載組件不應掩蓋潛在的性能問題。首先優化資產和後端流程；當延遲不可避免並且不是由於可解決的性能問題而引起的，加載元素是最後的手段。

有效使用骨架裝載機

骨架裝載機不應替換全屏裝載機，但最好在特定條件下使用：

可避免的延遲？

優先考慮性能優化以最大程度地減少加載延遲。骨骼裝載機僅在延遲確實不可避免的情況下適合。

用戶啟動的加載？

對於觸發加載的用戶操作（例如，懶惰圖像），為加載元素提供反饋。沒有它，用戶就不知道背景過程。

一致且可預測的佈局？

骨架裝載機在可預測的內容佈局中最有效。如果骨骼與最後的佈局不相似，那麼突然的變化可能會令人震驚。

立即可用的內容？

當某些內容立即可見而另一些內容不同步時，骨架裝載機最有效。這保持了進步感。僅用骨骼裝載機填充的屏幕沒有任何初始內容並不比全屏旋轉器要好得多。

建造強大的骨架裝載機

許多骨架裝載機示例被過度設計。本文提倡一種簡約的方法，以方便實施，重複使用和維護。

卡網格示例

使用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中文網其他相關文章！