스켈레톤 스크린

최근 프로젝트에서 스켈레톤 스크린이 필요한 경우가 있어서 시간을 내어 스켈레톤 스크린 솔루션에 대해 연구해 보았습니다. 이미 스켈레톤 스크린에 대한 사례가 많이 있습니다. 많은 분들이 자신만의 솔루션에 관심을 가지고 계시는데, 여기서는 개인적인 이해를 바탕으로 요약하고 분류하여 여러분과 공유했습니다.

추천 튜토리얼: "미니 프로그램 개발" "미니 프로그램 영상 튜토리얼"

스켈레톤 화면 정보(소개)

스켈레톤 화면은 페이지 데이터가 로드되기 전에 사용자에게 페이지를 보여줍니다. 일반적인 구조는 요청된 데이터가 반환될 때까지 페이지가 렌더링되지 않고 표시되어야 하는 데이터 콘텐츠가 추가된다는 것입니다. 기사 목록, 동적 목록 페이지 등 비교적 일반적인 목록 페이지에 자주 사용됩니다.
많은 프로젝트의 애플리케이션: 예: Ele.me h5 버전, Zhihu, Facebook 및 기타 웹사이트.
예를 들어 사진을 찍겠습니다:
스켈레톤 화면이란 무엇입니까?

두 가지 용도

용도는 소개에서 설명했지만 여전히 더 세분화될 수 있습니다.

라우팅 전환을 위한 로딩으로 스파, 컴포넌트의 수명과 결합 ajax 요청 반환 주기 및 타이밍에 따라 사용합니다.
첫 번째 화면 렌더링을 위한 최적화로.

첫 번째 사용 유형

첫 번째 유형의 사용에서는 스켈레톤 화면을 직접 작성해야 합니다. svg 구성 요소를 스켈레톤 화면으로 사용자 정의하는 솔루션을 권장합니다

react-content-loader
vue-content- loader

최초의 화면 렌더링(자동화 솔루션)

이 솔루션은 스켈레톤의 Ele.me입니다. 스크린 실습에서 요약한 솔루션 세트:

스켈레톤 화면의 DOM 구조 및 CSS
요소 뼈대 화면 플러그인의 구현 원리와 관련된 원리
솔루션의 프로젝트 주소: page-skeleton-webpack-plugin
사용 시 주의 사항:

1. cssUnit 구성: 적응형 단위를 사용해야 하며, 문서에 나와 있는 선택 범위에 따라 선택해야 하며, px로 직접 생성된 비율은 부적절합니다

2. puppeteer는 약 80M 정도인데 설치 중 한번에 성공적으로 다운로드가 되지 않을 수 있습니다.

원리:

Puppeteer를 통해 서버 측 헤드리스 Chrome을 제어하여 개발을 오픈합니다. 스켈레톤을 생성해야 하는 페이지의 경우 화면에서 페이지 로드 및 렌더링이 완료될 때까지 기다린 후 페이지 레이아웃 스타일을 유지하면서 페이지의 요소를 삭제하거나 추가하고 계단식 방식으로 기존 요소를 덮어쓰면 페이지 레이아웃을 변경하지 않고 그림을 숨기고 텍스트를 입력하고 스타일로 오버레이하여 회색 블록으로 표시됩니다. 그런 다음
수정된 HTML 및 CSS 스타일을 추출하여 스켈레톤 화면이 되도록 합니다.

스켈레톤 화면이란 무엇입니까?

기타 솔루션

ssr 렌더/프리렌더와 함께 사용:

애플릿의 스켈레톤 화면