CSS 페이지 로더

웹 사이트에 로드하는 데 시간이 걸리는 특정 페이지가 있는 경우 페이지 로더를 고려할 수 있습니다. 페이지 로더는 방문자에게 페이지가 로드되는 것을 시각적으로 전달하고 몇 초 동안 가만히 있도록 하는 모든 종류의 애니메이션입니다. 페이지 로더가 없으면 방문자가 사용자의 사이트가 응답하지 않는다고 생각하고 실망하여 클릭하기만 하면 됩니다. 페이지 로더는 또한 실제로 대기 시간이 훨씬 짧아 보일 수 있는 작은 방해물을 제공합니다.

페이지 로드 지연이 데이터베이스 읽기와 같은 것으로 인해 발생하는 경우 방문자가 이동하려는 페이지가 로드될 때까지 현재 페이지에 남아 있을 가능성이 높습니다. 이것은 방문자가 지연 전 페이지로 이동하는 대형 이미지와 같은 페이지 로딩 지연과 다릅니다. CSS 페이지 로더가 매우 잘 작동할 수 있는 이전 시나리오입니다. 방법은 다음과 같습니다.

• 페이지 로더가 있는 DIV를 만듭니다. 이것은 작은 애니메이션 GIF나 SWF 플래시 애니메이션일 수 있습니다.
• CSS에서 이 DIV를 필요한 위치에 배치합니다. 메인 콘텐츠 위에 배치하거나 다음과 같이 전체 화면을 화이트아웃할 수 있습니다.
  div#page_page { 위치: 절대; 상단: 0; 하단: 0%; 왼쪽: 0; 오른쪽: 0%; 배경색: 흰색; z-색인: 99; }
• 로더가 필요한 페이지로 연결되는 웹 사이트의 모든 페이지에 이 DIV를 추가합니다. 그런 다음 DIV의 CSS에 디스플레이를 추가해야 합니다. 이렇게 하면 정상적인 상황에서는 이 페이지에 표시되지 않습니다.
• 해당 DIV의 표시 속성을 전환하려면 자바스크립트를 터치해야 합니다. 이 javascript는 느린 로딩 페이지로 연결되는 모든 링크된 요소에 입력되었습니다. 이와 같이:
  <a onclick="javascript:document.getElementById(page_loader)).style.display=block`;" href="slowpage.block" >느린 페이지"

해당 링크를 클릭하면 자바스크립트가 트리거되어 DIV의 표시를 "차단"으로 설정하고 즉시 노출됩니다. 이것은 느린 로딩 페이지가 로드될 때까지 방문자가 볼 수 있으며, 그런 다음 방문자가 해당 페이지로 이동합니다.

업데이트: 여기에 예가 포함된 새로운 게시물이 있습니다.