'는 화려하지만 복잡하지 않은 페이지 로더를 만들게하십시오

최신 웹 사이트, 특히 진보적 인 웹 앱 및 반응성 사이트는 종종 인식 된 성능을 향상시키기 위해 로딩 상태를 사용합니다. 이것은 더 빠른 로딩 시간의 환상을 만듭니다. 복잡한 로더가 많지만 놀랍도록 효과적인 솔루션에는 최소한의 CSS 및 JavaScript가 필요합니다.

이 튜토리얼은 간단하면서도 우아한 접근 방식을 보여줍니다.

SVG 및 CSS : 미니멀리스트 스피너

프로젝트 설정이 있다고 가정하면 스피너 (프리 로더라고도 함)로 시작하겠습니다. SVG는 이미지 태그와 유사하게 확장 성 및 구현 용이성으로 인해 스피너에 이상적입니다. 처음부터 하나를 만들 수는 있지만 편의를 위해 Loading.io에서 미리 만든 SVG를 사용합니다.

SVG를 HTML에 통합하십시오.

<div class="preloader">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="화려하지만 복잡하지 않은 페이지 로더를 만들어 봅시다">
</div>

.preloader div는 컨테이너 역할을하여 페이지 컨텐츠의 가시성을 포지셔닝하고 제어하는 ​​데 도움이됩니다.

이제 스타일을합시다 :

 .preloader {
  정렬 구조 : 센터;
  배경 : #171616; / * 어두운 회색 배경 */
  디스플레이 : Flex;
  높이 : 100VH;
  정당화 컨텐츠 : 센터;
  왼쪽 : 0;
  위치 : 고정;
  상단 : 0;
  전환 : 불투명도 0.3S 선형;
  너비 : 100%;
  Z- 인덱스 : 9999;
}

이 CSS의 주요 측면 :

• Flexbox는 중앙 화면 배치를 보장합니다.
• 어두운 회색 배경은 기본 콘텐츠를 완전히 모호하게합니다. 다른 페이지 배경에 필요한 경우 조정하십시오.
• position: fixed 간섭을 방지하고 z-index: 9999 맨 위에 남아 있는지 확인합니다.

이 설정은 화면에 스피너를 중앙에 표시합니다.

부드러운 페이드 아웃을위한 JavaScript

페이드 아웃 효과를 만들기 위해 작은 JavaScript 기능을 사용합니다. 먼저 .preloader 요소를 선택하십시오.

 const preloader = document.querySelector ( '. preloader');

불투명도를 직접 0으로 설정하는 대신, 더 부드러운 전환을 위해 페이드 아웃 함수를 사용합니다.

 const fadeeffect = setInterval (() => {
  if (! preloader.style.opacity) {
    Preloader.style.opacity = 1;
  }
  if (preloader.style.opacity> 0) {
    Preloader.style.opacity -= 0.1;
  } 또 다른 {
    ClearInterval (Fadeeffect);
  }
}, 100);

이 기능은 0에 도달 할 때까지 100 밀리 초마다 불투명도를 점차적으로 감소시킨 다음 중지됩니다. 프로젝트에 이미 통합 된 경우 jQuery의 내장 페이드 아웃 기능을 고려하십시오.

마지막으로 창이로드 될 때 기능을 호출하십시오.

 window.addeventListener ( 'load', fadeeffect);

window.load 사용하면 CSS 및 SVG를 포함한 모든 페이지 요소가 페이드 아웃이 시작되기 전에로드되도록합니다.

HTML에 콘텐츠를 추가하고 결과를 테스트하십시오. 이 간단한 방법은 이미지, CSS 및 작은 JavaScript 기능 만 사용하여 광택 된 로딩 효과를 만듭니다.

위 내용은 '는 화려하지만 복잡하지 않은 페이지 로더를 만들게하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!