Klondike Solitaire 게임 구축: 바닐라 JavaScript로 간단한 이미지 프리로더 추가
- DDD원래의
- 2024-10-23 19:44:30981검색
웹 개발에서는 원활한 사용자 경험을 만드는 것이 최우선 과제이며, 특히 사이트가 큰 시각적 요소에 의존하는 경우 더욱 그렇습니다. 새로운 Klondike Solitaire 게임을 작업하는 동안 저는 카드 이미지가 자연스럽게 느껴지고 사용자가 빈 화면을 쳐다보는 일이 없도록 해야 했습니다. 그래서 저는 바닐라 JavaScript, HTML, CSS만 사용하여 사용자에게 이미지가 얼마나 로드되었는지 보여줄 수 있는 간단한 이미지 프리로더를 추가하기로 결정했습니다. 제가 한 방법은 다음과 같습니다.
1단계: 기본 설정
먼저 깔끔하게 정리하기 위해 간단한 파일 구조를 만들었습니다. 그 모습은 다음과 같습니다.
klondike-preloader/ ├── index.html ├── styles.css └── script.js
이런 식으로 HTML 구조, 스타일, JavaScript 로직을 위한 별도의 파일을 갖게 되었습니다.
2단계: HTML 구조 구축
HTML 파일에서 이미지 로딩 프로세스를 시작하는 버튼, 로딩 진행 상황을 보여주는 진행률 표시줄, 준비가 되면 이미지를 표시할 지점을 설정했습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klondike Solitaire Image Preloader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="load-button">Load Solitaire Image</button>
<div id="progress-bar">
<div id="progress"></div>
</div>
<div id="image-container">
<img id="image" alt="Klondike Solitaire Card" />
</div>
<script src="script.js"></script>
</body>
</html>
3단계: 진행률 표시줄 및 레이아웃 스타일 지정
구조를 잡은 후 스타일링에 들어갔습니다. 이미지가 실제로 로드되기 시작할 때까지 진행률 표시줄이 숨겨져 있기를 원했습니다.
스타일.css
#progress-bar {
width: 100%;
background: lightgray;
margin-bottom: 10px;
height: 20px;
display: none; /* Hidden at first */
}
#progress {
width: 0%;
height: 100%;
background: green;
}
#image-container {
display: none; /* Also hidden initially */
}
#load-button {
margin-bottom: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
4단계: 이미지 로딩을 위한 JavaScript 추가
이제 JavaScript를 사용해보세요! 제가 한 일은 다음과 같습니다.
- 트리거된 이미지 로드: 버튼을 클릭하면 이미지 로드가 시작됩니다.
- 진행률 표시줄 업데이트: 이미지 로드에 따라 표시줄을 표시하고 너비를 조정했습니다.
- 콘텐츠 길이를 사용할 수 없는 경우를 위한 대체: 서버가 전체 크기를 제공하지 않은 경우 기본 크기를 사용하여 진행률을 계산합니다.
script.js
const progressBar = document.getElementById('progress');
const imageContainer = document.getElementById('image-container');
const imageElement = document.getElementById('image');
const loadButton = document.getElementById('load-button');
// Default fallback size in bytes
const DEFAULT_SIZE_BYTES = 500 * 1024; // 500 KB
function loadImage(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
let totalSize = DEFAULT_SIZE_BYTES;
document.getElementById('progress-bar').style.display = 'block';
xhr.onprogress = (event) => {
if (event.lengthComputable) {
totalSize = event.total;
}
const percentComplete = (event.loaded / totalSize) * 100;
progressBar.style.width = percentComplete + '%';
};
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const objectUrl = URL.createObjectURL(blob);
imageElement.src = objectUrl;
imageContainer.style.display = 'block';
progressBar.parentNode.style.display = 'none';
}
};
xhr.onerror = () => {
console.error('Image loading failed.');
};
xhr.send();
}
loadButton.addEventListener('click', () => {
loadImage('https://example.com/your-image.jpg');
});
핵심 포인트:
- XMLHttpRequest를 사용하여 이미지 가져오기: onprogress로 진행 상황을 추적하고 이미지를 blob으로 처리했습니다.
- 기본 크기 대체: 서버가 파일 크기를 전송하지 않은 경우에도 진행률 표시줄이 작동하는지 확인했습니다.
- 로드 후 정리: 진행률 표시줄을 숨기고 로드된 이미지를 표시합니다.
5단계: 테스트
코딩 후 다양한 이미지 크기로 테스트하고 실제적인 로딩 경험을 제공하는지 확인하기 위해 기본 크기를 조정했습니다. codepen에서 코드를 사용해 볼 수 있습니다: https://codepen.io/qualotius/pen/KKOXxqP
결론
그리고 거기에 있습니다! 바닐라 JavaScript를 사용하여 이미지를 미리 로드하고 사용자 경험을 개선하는 기본적이면서도 효과적인 방법입니다. 시각적 피드백이 필수인 Klondike Solitaire와 같은 게임에 적합합니다. 사용해 보시고 막히면 언제든지 도움을 요청하세요!
위 내용은 Klondike Solitaire 게임 구축: 바닐라 JavaScript로 간단한 이미지 프리로더 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!