多用途で再利用可能なスケルトンローダーへの裸の骨アプローチ

スピナーやスケルトンローダーなどの効果的なロードインジケーターは、ページの読み込み時間中のユーザーエクスペリエンスを大幅に改善します。スピナーの実装は簡単ですが、スケルトンローダーは、潜在的にはより複雑ですが、特定のシナリオで優れたエクスペリエンスを提供します。既存のスケルトンローダーの実装の多くは、再利用性とスケーラビリティがなく、多くの場合、単一のコンポーネントに合わせて調整されています。この記事では、より効率的で、再利用可能でスケーラブルなアプローチを紹介します。

スピナー対スケルトンローダー

スピナー（または進行状況バー）は最も一般的な負荷指標であり、ロードが進行中であるという視覚的な手がかりを提供します。しかし、彼らは限られたエンゲージメントを提供します。ユーザーは受動的に待機し、他のページ要素と対話できません。逆に、スケルトンローダー（またはスケルトンスクリーン）は、より積極的な待機体験を提供します。彼らは、最終的なコンテンツを表すプレースホルダー（色付きボックス）を使用し、進歩感とより速いロードを認識します。

重要なことに、コンポーネントのロードは、基礎となるパフォーマンスの問題を隠さないはずです。最初に資産とバックエンドプロセスを最適化します。ロード要素は、遅延が避けられない場合の最後の手段であり、修正可能なパフォーマンスの問題によるものではありません。

スケルトンローダーの効果的な使用

スケルトンローダーは、フルスクリーンローダーを置き換えるべきではありませんが、特定の条件下で使用するのが最適です。

遅延を回避できますか？

パフォーマンスの最適化を優先して、負荷の遅延を最小限に抑えます。スケルトンローダーは、遅延が本当に避けられない場合にのみ適しています。

ユーザー開始ロード？

読み込みをトリガーするユーザーアクション（例えば、レイジーロード画像）の場合、ロード要素でフィードバックを提供します。それがなければ、ユーザーはバックグラウンドプロセスに気付いていません。

一貫した予測可能なレイアウト？

スケルトンローダーは、予測可能なコンテンツレイアウトで最適に機能します。スケルトンが最終的なレイアウトによく似ていない場合、突然の変化は耳障りになる可能性があります。

すぐに利用可能なコンテンツ？

スケルトンローダーは、一部のコンテンツがすぐに表示され、他のコンテンツが非同期にロードされる場合に最も効果的です。これは進歩の感覚を維持します。初期コンテンツのないスケルトンローダーのみで満たされた画面は、フルスクリーンスピナーよりも大幅に優れていません。

堅牢なスケルトンローダーの構築

多くのスケルトンローダーの例は、過剰に設計されています。この記事では、簡単に実装、再利用、メンテナンスをするためのミニマリストのアプローチを提唱しています。

カードグリッドの例

HTML、CSS、およびJavaScriptを使用して、6枚のカードの単純なグリッドが非同期負荷を示します。各カードはプレースホルダー画像を使用します（ <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="多用途で再利用可能なスケルトンローダーへの裸の骨アプローチ"> ）画像がロードされるまでスケルトンが表示されるようにします。

スケルトンローダースタイル

個別のスケルトンコンポーネントを作成する代わりに、既存のレイアウトスタイルを活用します。次のCSSは、 .loading親クラスが存在するときにスケルトンスタイルをアクティブにします。

 .Loading .Loading-Item {
  背景：＃949494！重要。 / *カスタマイズ可能なスケルトンローダーの色 */
  色：RGBA（0、0、0、0）！重要;
  境界線：RGBA（0、0、0、0）！重要。
  ユーザーセレクト：なし;
  カーソル：待って;
}

.Loading .Loading-Item * {{
  可視性：隠された！重要。
}

.Loading .Loading-Item：empty :: after、
.Loading .Loading-Item *：empty :: after {
  コンテンツ： "\ 00A0";
}

このアプローチは、メインコンポーネントスタイルからレイアウトを継承し、コンテンツをソリッドボックスに置き換えます。 .loading-itemクラスは、レイアウトの保存を保証します。

マルチラインコンテンツとレイアウトシフト

コンテンツの長さの変化によって引き起こされるレイアウトシフトに対処するには、使用してください<br>複数の行をシミュレートするためのプレースホルダー要素内のタグ。これは、正確なサイジングのために関連するCSSプロパティを継承します。

アクセシビリティの考慮事項

アクセシビリティが重要です。

対比

WCAGガイドラインを順守するために、視認性を向上させるには、高コントラストのスケルトンローダーが推奨されます。 prefers-contrastメディアクエリ（広くサポートされている場合）は、さらなるカスタマイズを提供できます。

アニメーション

必要に応じてアニメーションを無効にするためにprefers-reduced-motionメディアクエリを使用したモーションを減らしたユーザーの好みを尊重します。

スクリーンリーダー

aria-hiddenや視覚的に隠されたテキストなどのARIA属性を使用して、スクリーンリーダーにコンテキストを提供します。例： <div> <span style="display:none;">Loading...</span><img aria-hidden="true" ... alt="多用途で再利用可能なスケルトンローダーへの裸の骨アプローチ" > </div> 。

結論

このミニマリストのアプローチは、既存のスタイルからレイアウトを継承する多目的で再利用可能なスケルトンローダーを作成し、コンテンツのみを置き換えます。これにより、保守性とスケーラビリティが向上します。アクセシビリティの優先順位付けにより、すべてのユーザーに包括性が保証されます。

以上が多用途で再利用可能なスケルトンローダーへの裸の骨アプローチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。