이미지 로딩은 웹 애플리케이션의 성능에 영향을 미치는 중요한 요소 중 하나입니다. 특히, 많은 수의 이미지를 화면에 표시해야 하는 웹 애플리케이션의 경우 이미지 로딩이 느려질 수 있습니다. 이러한 문제를 해결하기 위해 비동기 데이터 요청을 이용하여 이미지를 로딩하는 방법을 알아보겠습니다.
1. 이미지를 비동기적으로 로딩하기
일반적으로 웹 페이지에서 이미지는 img 태그를 이용하여 동기적으로 로딩됩니다. 하지만, 이 방식은 페이지가 로딩될 때 이미지를 모두 가져와야 하므로 성능이 저하될 수 있습니다. 비동기적으로 이미지를 로딩하여 이 문제를 해결할 수 있습니다.
// 이미지를 비동기적으로 로딩하는 함수
async function loadImage(url) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = url;
});
}
// 이미지를 비동기적으로 로딩하고 화면에 표시하는 예제
(async function() {
const imgUrl = 'https://example.com/image.jpg';
const image = await loadImage(imgUrl);
document.body.appendChild(image);
})();
위 예제에서 loadImage 함수는 이미지의 URL을 매개변수로 받아 Promise를 반환합니다. Image 객체를 생성하고, onload 콜백 함수를 이용하여 이미지가 성공적으로 로드되면 resolve를 호출하고, onerror 콜백 함수를 이용하여 에러가 발생하면 reject를 호출합니다. 이후, await 키워드를 이용하여 이미지를 비동기적으로 로딩하고, 화면에 표시합니다.
2. 이미지 로딩 상태 표시하기
비동기적으로 이미지를 로딩할 때, 사용자에게 로딩 상태를 표시하는 것이 좋습니다. 이를 통해 사용자는 이미지가 로딩되는 동안 화면에 어떠한 변화가 있다는 것을 알 수 있습니다.
// 이미지 로딩 상태를 표시하는 함수
function showLoadingState() {
const loader = document.createElement('div');
loader.className = 'loader';
document.body.appendChild(loader);
}
// 이미지를 비동기적으로 로딩하고 화면에 표시하며, 로딩 상태를 표시하는 예제
(async function() {
const imgUrl = 'https://example.com/image.jpg';
showLoadingState();
const image = await loadImage(imgUrl);
document.body.appendChild(image);
document.querySelector('.loader').remove();
})();
위 예제에서 showLoadingState 함수는 로딩 상태를 표시하기 위해 div 요소를 생성하고, loader 클래스를 추가하여 화면에 표시합니다. 이미지를 로딩하기 전에 showLoadingState 함수를 호출하여 로딩 상태를 표시하고, 이미지 로딩이 완료되면 로딩 상태를 제거합니다.
결론
비동기 데이터 요청을 이용하여 이미지를 로딩하는 방법을 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 이미지 로딩을 비동기적으로 처리하고, 로딩 상태를 적절히 표시함으로써 사용자 경험을 개선할 수 있습니다.
참고 자료: