Skeleton Loader를 사용한 동적 HTML 로딩 - jQuery Godfather.js
해피팀
네티즌
소스분류
JQuery
다운로드 횟수
0 회
간단설명
Godfather.js는 웹 애플리케이션에서 원활한 로딩 상태를 생성하기 위해 동적 HTML 로딩과 스켈레톤 화면을 결합하는 가벼운 jQuery 플러그인입니다.
이 기능은 HTML 구성 요소를 지정된 컨테이너에 로드하고, 가져오는 동안 애니메이션 뼈대 화면을 표시합니다.
평가하기
- 작동 원리
이 플러그인은 간단한 API를 통해 HTML 구성 요소 로딩을 처리합니다. 서버에서 구성 요소를 가져와 대상 컨테이너에 주입합니다. 로딩 프로세스 동안 구성 요소의 최종 레이아웃과 일치하는 스켈레톤 화면을 표시합니다.
플러그인은 템플릿 변수를 통한 동적 데이터 주입을 지원합니다. 로드된 구성 요소 내에서 콘텐츠를 채우기 위해 데이터 객체를 전달할 수 있습니다. 이는 사용자별 콘텐츠, 동적 텍스트 또는 HTML 템플릿에 삽입해야 하는 모든 가변 데이터에 적합합니다.
스켈레톤 로더는 실제 구성 요소 페치 시간 동안만 실행됩니다. 이는 인위적인 지연이 아닌 실제 로딩 상태를 반영하는 자연스러운 로딩 경험을 만들어냅니다.
- 라이센스
MIT
- 사용 방법
1. 최신 jQuery 라이브러리를 로드한 후 필요한 godfather.js 파일을 다운로드하여 로드합니다.
2. HTML 구성 요소가 삽입될 요소를 만듭니다 .
3. godfather.js가 동적으로 로드할 템플릿 변수로 HTML 구성 요소를 준비합니다.
4. 플러그인을 초기화하고 동적 데이터로 HTML 구성 요소를 로드합니다.
5. 스켈레톤 로더의 기본 스타일과 애니메이션을 재정의합니다.
- 작동 화면
네티즌 의견이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
