페이지가 로드될 때까지 페이지 로딩 div를 표시하려면 어떻게 해야 합니까?

페이지가 로드되는 동안 흰색 화면이나 검은색 화면 전체가 표시되는 대신 로딩 표시기가 표시되어 앱의 사용자 경험도 향상됩니다.

이제 로딩 표시기를 표시할 수 있는 라이브러리가 있습니다. 그러나 HTML과 CSS를 사용하여 사용자 정의 로딩 표시기 div를 만들 수 있습니다.

이 튜토리얼에서는 HTML, CSS 및 JavaScript를 사용하여 페이지가 로드될 때까지 페이지 로딩 div를 표시합니다

onreadystatechange 이벤트를 사용하여 페이지를 로드할 때 로딩 표시기를 표시하세요

JavaScript에서는 웹페이지 상태가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다. 첫 번째 상태는 "대화형"입니다. 이는 웹페이지가 상호작용 중이며 로드가 시작되었음을 의미합니다. 두 번째 단계는 "완료"입니다. 즉, 웹페이지가 성공적으로 로드되었습니다.

따라서 다른 모든 상태에서는 본문 텍스트를 숨기고 로딩 표시를 표시할 수 있으며, "완료" 상태에서는 로딩 표시를 숨기고 본문 텍스트를 표시할 수 있습니다.

문법

사용자는 다음 구문에 따라 문서 상태에 따라 로딩 표시기를 표시하거나 숨길 수 있습니다.

으아악

위 구문에서는 문서 상태가 변경될 때마다 이 함수를 호출합니다. 상태가 "Complete"인지 확인한 후 로딩 표시기를 숨기고 본문을 표시합니다.

예

아래 예에서는 “loading_indicator” div를 사용하여 div를 만들고 일부 CSS를 적용하여 순환 로딩 표시기로 만들었습니다.

JavaScript에서는 onreadystatechange 이벤트를 사용합니다. 이 함수는 상태가 변경될 때마다 실행됩니다. 함수에서는 문서의 "readyState" 속성을 사용하여 문서의 현재 상태를 가져옵니다. 문서의 현재 상태가 "완료"이면 로딩 표시기에 액세스하여 숨기고 전체 문서 본문을 표시할 수 있습니다. 그렇지 않으면 로딩 표시기를 표시하고 문서 본문을 숨길 수 있습니다.

으아악

예

아래 예에서는 페이지가 로드될 때 jQuery를 사용하여 로딩 표시기를 표시합니다. 문서 본문에 HTML과 CSS를 추가했습니다.

JQuery에서는 문서 본문에 로딩 표시기를 추가하기 위해 Append() 메서드를 사용합니다. 그런 다음 "load" 이벤트를 사용하여 페이지가 로드되었는지 확인하고 이를 기반으로 웹 페이지에서 로딩 표시기를 제거합니다.

으아악

JavaScript와 jQuery를 사용하여 페이지가 로드될 때 로딩 표시기를 표시하는 방법을 배웠습니다. 첫 번째 예에서는 JavaScript의 onreadystatechange 이벤트를 사용하여 페이지 로드 여부에 따라 로딩 표시기를 표시하거나 숨깁니다.

두 번째 예에서는 JQuery의 로드 이벤트를 사용하여 로딩 표시기를 표시하거나 숨깁니다

위 내용은 페이지가 로드될 때까지 페이지 로딩 div를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!