다재다능하고 재사용 가능한 스켈레톤 로더에 대한 베어 본 접근

스피너 및 골격 로더와 같은 효과적인 로딩 표시기는 페이지로드 시간 동안 사용자 경험을 크게 향상시킵니다. 스피너는 구현하기 간단하지만 스켈레톤 로더는 잠재적으로 더 복잡하지만 특정 시나리오에서 우수한 경험을 제공합니다. 기존의 많은 골격 로더 구현에는 재사용 성과 확장 성이 부족하여 종종 단일 구성 요소에 맞게 조정됩니다. 이 기사는보다 효율적이고 재사용 가능하며 확장 가능한 접근 방식을 제시합니다.

스피너 대 스켈레톤 로더

스피너 (또는 진행률 막대)는 가장 일반적인 로딩 표시기이며 로딩이 진행중인 시각적 큐를 제공합니다. 그러나 그들은 제한된 참여를 제공합니다. 사용자는 수동적으로 기다리며 다른 페이지 요소와 상호 작용할 수 없습니다. 반대로 골격 로더 (또는 골격 스크린)는보다 활발한 대기 경험을 제공합니다. 그들은 최종 콘텐츠를 나타내는 자리 표시 자 (색상 상자)를 사용하여 진행감을 제공하고 더 빠른 로딩을 인식합니다.

결정적으로, 로딩 구성 요소는 기본 성능 문제를 숨겨서는 안됩니다. 먼저 자산 및 백엔드 프로세스를 최적화합니다. 로딩 요소는 지연이 불가능하고 성능 문제가 해결되지 않은 경우 최후의 수단입니다.

골격 로더의 효과적인 사용

스켈레톤 로더는 전체 화면 로더를 교체하지 않아야하지만 특정 조건에서 가장 잘 사용됩니다.

피할 수있는 지연?

로딩 지연을 최소화하기 위해 성능 최적화 우선 순위를 정합니다. 골격 로더는 지연이 피할 수없는 경우에만 적합합니다.

사용자가 시작한로드?

사용자 조치를 트리거링하는 경우 (예 : 게으른로드 이미지) 로딩 요소와 함께 피드백을 제공하십시오. 그것 없이는 사용자가 배경 프로세스를 알지 못합니다.

일관되고 예측 가능한 레이아웃?

골격 로더는 예측 가능한 컨텐츠 레이아웃과 가장 잘 작동합니다. 골격이 최종 레이아웃과 매우 유사하지 않으면 갑작스런 변화가 어려울 수 있습니다.

즉시 사용 가능한 콘텐츠?

스켈레톤 로더는 일부 콘텐츠가 즉시 볼 때 가장 효과적이며 다른 콘텐츠는 비동기로로드됩니다. 이것은 진보의 감각을 유지합니다. 초기 컨텐츠가없는 골격 로더로만 채워진 화면은 전체 화면 스피너보다 훨씬 낫지 않습니다.

강력한 골격 로더 구축

많은 골격 로더 예제가 과도하게 엔지니어링됩니다. 이 기사는 쉽게 구현, 재사용 및 유지 보수를위한 미니멀리스트 접근법을 옹호합니다.

카드 그리드 예제

HTML, CSS 및 JavaScript를 사용하면 간단한 6 장의 카드 그리드가 비동기 로딩을 보여줍니다. 각 카드는 자리 표시 자 이미지를 사용합니다 ( <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="다재다능하고 재사용 가능한 스켈레톤 로더에 대한 베어 본 접근"> ) 이미지가로드 될 때까지 골격이 보이도록합니다.

골격 로더 스타일

별도의 골격 구성 요소를 만드는 대신 기존 레이아웃 스타일을 활용하십시오. 다음 CSS는 .loading 부모 클래스가있을 때 골격 스타일을 활성화합니다.

 .LOADING .LOWHING-ITEM {
  배경 : #949494! 중요; / * 맞춤형 골격 로더 색상 */
  색상 : RGBA (0, 0, 0, 0)! 중요;
  국경 색 : RGBA (0, 0, 0, 0)! 중요;
  사용자 선택 : 없음;
  커서 : 잠깐;
}

.LOADING .LOWHING-ITEM * {
  가시성 : 숨겨진! 중요;
}

.LOADING .LOWHING-ITEM : empty :: After,
.LOADING .LOWHING-ITEM *: empty :: 이후 {
  내용 : "\ 00a0";
}

이 접근법은 기본 구성 요소 스타일의 레이아웃을 상속하여 컨텐츠를 단단한 상자로 대체합니다. .loading-item 클래스는 레이아웃 보존을 보장합니다.

멀티 라인 컨텐츠 및 레이아웃 이동

콘텐츠 길이가 다양하여 레이아웃 교대 근무를 해결하려면 사용하십시오.<br> 자리 표시 자 요소 내의 태그는 여러 줄을 시뮬레이션합니다. 이는 정확한 크기를 위해 관련 CSS 속성을 상속합니다.

접근성 고려 사항

접근성은 중요합니다.

차이

WCAG 가이드 라인을 준수하여 가시성을 높이기 위해 고 대비 골격 로더가 권장됩니다. prefers-contrast 미디어 쿼리 (광범위하게 지원되는 경우)는 추가 사용자 정의를 제공 할 수 있습니다.

애니메이션

필요한 경우 애니메이션을 비활성화하기 위해 prefers-reduced-motion Media Query를 사용하여 모션 감소에 대한 사용자 선호도를 존중합니다.

스크린 리더

aria-hidden 및 시각적으로 숨겨진 텍스트와 같은 ARIA 속성을 사용하여 화면 리더에게 컨텍스트를 제공하십시오. 예 : <div> <span style="display:none;">Loading...</span><img aria-hidden="true" ... alt="다재다능하고 재사용 가능한 스켈레톤 로더에 대한 베어 본 접근" > </div> .

결론

이 미니멀리스트 접근법은 기존 스타일에서 레이아웃을 상속하여 컨텐츠 만 대체하는 다목적이고 재사용 가능한 골격 로더를 만듭니다. 이것은 유지 보수 및 확장 성을 향상시킵니다. 접근성 우선 순위를 정하면 모든 사용자의 포괄 성을 보장합니다.

위 내용은 다재다능하고 재사용 가능한 스켈레톤 로더에 대한 베어 본 접근의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!