예제에서는 HTML5 캔버스 태그와 자바스크립트 스크립트를 사용하여 로딩 이미지 효과를 간단히 작성했습니다. 효과를 미리 보려면 HTML5를 지원하는 브라우저를 사용하세요.
아래 그림은 점진적인 수평 그리드 효과를 보여줍니다
html 부분:
XML/HTML 코드클립보드에 콘텐츠 복사
- >
-
<html lang="ko" >
-
<머리>
-
<메타 문자 집합="UTF- 8">
-
<제목>html5 이미지 로딩 제목>
-
머리>
-
<몸>
-
<버튼 클릭="drawImg1( )">왼쪽에서 오른쪽으로버튼>
-
<버튼 클릭="drawImg2( )">중앙에서 좌우측으로버튼>
-
<버튼 클릭="drawImg3( " >
<시간/>
-
<캔버스 클래스
=- "캔버스" id="캔버스" 너비="600" 높이="300">캔버스>
몸>
-
html>
-
JavaScript 부분:
XML/HTML 코드
클립보드에 콘텐츠 복사
- //초기화
-
var 캔버스 = 문서.getElementById("캔버스"),
-
컨텍스트 = 캔버스.getContext("2d"),
-
이미지 = 새 이미지()
-
image.src = "img/test.jpg"
- //왼쪽에서 오른쪽으로 로딩 방법
- drawImg1() 함수{
-
var drawWidth = 0,
-
간격 = setInterval(function(){
- context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height)
- drawWidth = 20
-
if(drawWidth > canvas.width)clearInterval(간격);
},100) -
} -
//중앙에서 좌우측으로 로딩방식 오픈 -
drawImg2() 함수{ -
var -
drawWidth = 0,
-
drawLeft = 캔버스.width/2,
-
간격 = setInterval(function(){
context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height) -
drawWidth = 20 -
drawLeft -
-= 10;
if(drawLeft
<- 0)clearInterval(간격);
},100)
} -
//점진적 수평 그리드 로딩 방식 -
drawImg3() 함수{ -
var - drawWidth
= - 0,
spaceWidth
= - canvas.width/20, //10은 분할된 블록의 개수를 의미합니다
간격
= - setInterval(function(){
for(var i
= - 0;i<20;i ){
context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height)
} -
drawWidth = 5 -
if(drawWidth - > spaceWidth)clearInterval(간격);
- },100);
- }
위 내용은 HTML5에서 애니메이션 형태로 이미지를 로딩하기 위해 편집자가 소개한 내용입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
