JS Progress Loading 애니메이션 프로그램은 저의 개인 작업입니다. 그것이 잘 쓰여지지 않은 경우, 당신은 그것을 참조 할 수 있지만, 나의 허락 없이는 다른 목적으로 그것을 사용하지 마십시오!
나는 아침에 홈페이지 진보 로딩 애니메이션을 썼습니다. 내 블로그에서 사용하고 싶었습니다. 블로그 파크가 너무 빨리로드되어 애니메이션 효과가 전혀 볼 수 없다는 것을 알았습니다. 방금 '완료'를로드했습니다. 잊어 버리세요, 블로그를 너무 부풀어 오지 마십시오!
그래서 나는 데모 페이지를 작성하고 더 큰 웹 사이트를로드하기 위해 신체에 iframe을 추가하여 효과를 볼 수 있습니다!
Safari로 CSS 애니메이션을 열는 재생 시간은 동기화되었습니다. 왜 그런지 모르겠지만 로컬 테스트는 괜찮습니다 (약간의 조언을 해주세요!), Chrome과 Firefox에는 아무런 문제가 없지만 IE를 테스트하지 않았습니다.
로드 타임 통계 나는 Windows 객체의 성능 속성을 사용했는데, 이는 정확한 시간을 계산하는 데 특별히 사용되는 방법입니다. 이것은 성능 속성에 대한 MDN의 설명입니다.
이 예제의 구현 원리는 비교적 간단하지만 파일 크기에 따라 로딩 진행을 실제로 표시하지는 않습니다. 문서의 상태에 따라 디스플레이 진행 상황 만 변경합니다. 실제로, XMLHTTPREQUEST 인스턴스의 진행 이벤트를 사용하여 XMLHTTPREQUEST를 자세히 해석하는 또 다른 신뢰할 수있는 방법이 있습니다.
var request = new xmlhttprequest (); request.onprogress = function (e) {if (e.lengthcomputable) {// longth computable은 파일의 크기를 지니고, 값은 true, false progress.innerhtml = math.round (100* e.loaded/e.total) +/'%/'; //로드, 총계는로드 된 크기와 총 크기를 나타냅니다}}위의 방법으로 구현하는 것은 매우 번거 롭고 100% 실제 로딩 진행 상황을 달성 할 수 없으므로 약간 가짜 인 척했습니다.
이 예제는 또한 document.stylesheets [0] .insertrule () 메소드를 사용합니다. 여기에 대한 요약은 다음과 같습니다. Native JS를 가진 CSS 스타일을 읽고 쓰는 방법에 대한 요약
CSS 애니메이션 구현과 관련하여 코드를 직접 읽으십시오. 매우 간단한 코드입니다. 읽는 데 어려움이 있다면 CSS의 기본 사항을 보충하는 것이 좋습니다. 실용적인 정보를 소개하겠습니다. CSS 중국 참조 매뉴얼의 웹 사이트. 표현 기술이 제한되어 있으므로 여기서 씹지 않을 것입니다.
다음은 전체 코드 + 데모입니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> sufu의 작품 </title> <cript> document.onreadyStateChange = function () {Id) {return dut $ id ( 'preloader_line'). FirstElementChild, Preloader = $ id ( 'preloader'), preloader_center = $ id ( 'preloader_center'), preloader_btn = $ id ( 'preloader_btn'), preloader_loading = $ id ( 'preloader_loading'); if (document.readystate == "Interactive") {로드 (1,110,50); } if (document.readystate == "complete") {로드 (5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerhtml = '로드 완료'+'<br/>'+'를 사용하여 :'+performance.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px solid green'; preloader_btn.style.fontstyle = 'inherit'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {docum } else {// document.stylesheets와 호환 가능합니다 [0] .addrule ( '#preloader_btn : hover {border-bottom : 4px solid green; border-radius : 60px; color : red;}', 0); } preloader_btn.onclick = function () {var exacity = 1, id; 함수 hide () {if (exacity <= 0) {cleartimeout (id); Preloader.style.display = 'none'; document.body.style.overflow = 'Auto'; 반품; } 불투명도 -= 0.1; Preloader.style.opacity = 불투명도; id = settimeout (function () {hide ();}, 50); } 숨다(); }; } 함수 로딩 (step, max, time) {if (width> = max) {cleartimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'none'; } 반품; } 너비 += 단계; preloader_line.style.width = width+'px'; id = settimeout (function () {로드 (step, max, time);}, time); }}}; </script> <tyle> 바디 {오버플로 : 숨겨; } #preloader {위치 : 절대; 너비 : 100%; 높이 : 100%; 배경색 : 흰색; Z- 인덱스 : 999; } #preloader_center {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 너비 : 150px; 높이 : 75px; 마진 : 자동; } #preloader_loading {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 45px; 마진 : 자동; 너비 : 96px; 높이 : 30px; } #preloader_loaded {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 45px; 마진 : 자동; 글꼴 크기 : 12px; 텍스트 정렬 : 센터; 라인 높이 : 30px; } #preloader_loading span {position : 절대; 너비 : 10px; 높이 : 2px; 상단 : 0; 하단 : 0; 마진 : 자동; 배경색 : #9B59B6; 애니메이션 : 1.5S 무한 용이함을로드; } #preloader_loading span : nth-Child (2) {왼쪽 : 12px; 애니메이션-지연 : .1S; } #preloader_loading span : nth-Child (3) {왼쪽 : 24px; 애니메이션-지연 : .2S; } #preloader_loading span : nth-Child (4) {왼쪽 : 36px; 애니메이션-지연 : .3S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (4) {왼쪽 : 36px; 애니메이션-지연 : .3S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_loading span : nth-Child (4) {왼쪽 : 36px; 애니메이션-지연 : .3S; } #preloader_loading span : nth-Child (5) {왼쪽 : 48px; 애니메이션-지연 : .4S; } #preloader_load 스팬 : nth-Child (6) {왼쪽 : 50px; 애니메이션-지연 : .5S; } #preloader_loading 스팬 : nth-Child (7) {왼쪽 : 62px; 애니메이션-지연 : .6S; } #preloader_loading span : nth-Child (8) {왼쪽 : 74px; 애니메이션-지연 : .7S; } #preloader_loading span : nth-Child (9) {왼쪽 : 86px; 애니메이션-지연 : .8S; } @KeyFrames 로딩 {0%{높이 : 2PX; 배경 :#9B59B6;} 15%{높이 : 20PX; 배경 :#3498DB;} 50%{높이 : 2PX; 배경 :#9B59B6;} 100%{높이 : 2PX; 배경 :#9B59B6;}} iframe {100%; 1000px;} #preloader_btn {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 마진 : 자동; 디스플레이 : 블록; 너비 : 122px; 높이 : 40px; 글꼴 크기 : 14px; 텍스트 정렬 : 센터; 라인 높이 : 40px; 커서 : 포인터; 색상 : #9B59B6; 글꼴 스타일 : 이탈리아; -webkit-transition : 모든 .5; -Moz-transition : 모든 .5; -ms-transition : 모든 .5; -O- 전달 : 모든 .5; 전환 : 모든 .5; } #preloader_line {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 40px; 마진 : 자동; 너비 : 120px; 높이 : 2px; 국경 : 1px 고체 녹색; } #preloader_line span {display : block; 높이 : 2px; 너비 : 0; 배경색 : 녹색; . id = "preloader_load"> <span> </span> <span> </span> <span> </span> </span> <span> </span> </div> </div> </div> <iframe src = "http://jd.com"> </iframe> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.