Klondike Solitaire 게임 구축: 바닐라 JavaScript로 간단한 이미지 프리로더 추가

웹 개발에서는 원활한 사용자 경험을 만드는 것이 최우선 과제이며, 특히 사이트가 큰 시각적 요소에 의존하는 경우 더욱 그렇습니다. 새로운 Klondike Solitaire 게임을 작업하는 동안 저는 카드 이미지가 자연스럽게 느껴지고 사용자가 빈 화면을 쳐다보는 일이 없도록 해야 했습니다. 그래서 저는 바닐라 JavaScript, HTML, CSS만 사용하여 사용자에게 이미지가 얼마나 로드되었는지 보여줄 수 있는 간단한 이미지 프리로더를 추가하기로 결정했습니다. 제가 한 방법은 다음과 같습니다.

---

1단계: 기본 설정

먼저 깔끔하게 정리하기 위해 간단한 파일 구조를 만들었습니다. 그 모습은 다음과 같습니다.

klondike-preloader/
├── index.html
├── styles.css
└── script.js

이런 식으로 HTML 구조, 스타일, JavaScript 로직을 위한 별도의 파일을 갖게 되었습니다.

2단계: HTML 구조 구축

HTML 파일에서 이미지 로딩 프로세스를 시작하는 버튼, 로딩 진행 상황을 보여주는 진행률 표시줄, 준비가 되면 이미지를 표시할 지점을 설정했습니다.

index.html

    <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">


    <button id="load-button">Load Solitaire Image</button>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <div id="image-container">
        <img src="/static/imghwm/default1.png" data-src="script.js" class="lazy" id="image" alt="Klondike Solitaire Card">
    </div>
    <script></script>

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를 사용해보세요! 제가 한 일은 다음과 같습니다.

1. 트리거된 이미지 로드: 버튼을 클릭하면 이미지 로드가 시작됩니다.
2. 진행률 표시줄 업데이트: 이미지 로드에 따라 표시줄을 표시하고 너비를 조정했습니다.
3. 콘텐츠 길이를 사용할 수 없는 경우를 위한 대체: 서버가 전체 크기를 제공하지 않은 경우 기본 크기를 사용하여 진행률을 계산합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!