简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JS는 페이지를 로드할 때 로드 진행률 표시줄을 구현합니다.

高洛峰
풀어 주다： 2016-12-16 16:53:13
원래의
1963명이 탐색했습니다.

페이지 로딩 시 로딩 진행 표시줄이 있는 JS 구현

페이지 로딩 시 로딩 구현 방법

로딩 구현은 아마도 이를 의미할 것입니다. 먼저 표시할 콘텐츠를 숨기고, 먼저 로딩 텍스트나 그림 등을 표시한 다음 문서가 로드된 후에 내용이 표시되고 로딩은 숨겨집니다.

여기서는 jquery를 사용했는데, 사용하든 안하든 상관없습니다. 

<html> 
<head> 
<script language="javascript" type="text/javascript" src="jquery-1.6.1.js">
</script> 
/** * 页面加载完成后显示页面 */ 
function showPage(){ $(&#39;#divPageLoading&#39;).remove(); 
$(&#39;#divPageBody&#39;).show(); } 
</head>
 <body onload="showPage();"> 
 <div id="divPageLoading"> 
 <img src="pageloading.gif" style="width:120px;height:120px;position:absolute;left:45%;top:40%;"/> 
 </div>
  <div id="divPageBody" style="display:none;"> …… 
 </div> 
 </body> 
 </html>
로그인 후 복사



페이지 로드 시 진행률 표시줄 로드에 대한 JS 구현에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요. !

관련 라벨：
JS进度条
원천：php.cn
이전 기사：JS는 진행률 표시줄을 사용하여 페이지 점프 특수 효과를 구현합니다. 다음 기사：js에서 이메일 보내기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함 공지 사항 목록(API에서 검색)을 페이지에 표시하려고 합니다. 저는 Vuex 스토어를 사용하고 있으며 Announcements라는 상태가 있습니다. 또한 사용자...
에서 2024-04-06 10:37:58
0
1
385
수직으로 회전된 표 제목, 중앙 + 하단 정렬, 브라우저 간 Chrome에서는 예상대로 보이지만 Firefox에서는 그렇지 않은 회전된 헤더가 있는 테이블이 있습니다. Chromev108(수직 하단, 수평 중간) ✅Fire...
에서 2024-04-04 16:45:25
0
1
330
여러 테이블에서 데이터를 가져올 때 SQL 그룹화에서 테이블의 항목을 기반으로 쿼리하는 방법 두 개의 테이블이 있습니다. 2.ride click table id | time ride table id | timestamp 두 테이블 모두 GROUPBYEXT...
에서 2024-04-04 08:58:17
0
1
319
적용 방법 사용 배열의 최대값을 찾는 간단한 방법은 Math.max.apply(null,myArray)입니다. 그러나 myArray에 복소수가 포함되어 있고 각 복소수에 복소수의...
에서 2024-04-03 21:41:46
0
2
278
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！