자바스크립트의 Image() 객체는 HTML의 <img> 요소를 나타내는 내장 생성자입니다. 이 객체를 사용하면 스크립트를 통해 새로운 이미지를 동적으로 만들고, 속성을 설정한 뒤 웹 페이지에 추가할 수 있습니다.
Image() 객체란 무엇인가?
Image() 생성자는 new Image(width, height) 형태로 호출하며, 선택적으로 가로와 세로 크기를 픽셀 단위로 지정할 수 있습니다. 생성된 이미지 객체는 일반적인 DOM 요소와 마찬가지로 src 속성에 경로를 지정한 후, appendChild() 메서드 등을 통해 문서에 삽입할 수 있습니다.
또한 Image() 객체는 이미지 사전 로딩(preloading)에도 널리 활용됩니다. 화면에 표시하지 않은 채 이미지를 미리 다운로드해 두면, 실제로 필요할 때 즉시 렌더링되어 사용자 경험이 향상됩니다.
예제 코드
다음은 버튼을 클릭하면 Image() 객체로 생성한 이미지를 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript의 Image() 객체</h1>
<div class="result"><br /></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 이미지가 표시됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let newImage = new Image(500, 300);
newImage.src = "https://i.picsum.photos/id/195/536/354.jpg";
BtnEle.addEventListener("click", () => {
resEle.appendChild(newImage);
});
</script>
</body>
</html>코드 설명
new Image(500, 300)— 가로 500px, 세로 300px 크기의 새 이미지 객체를 생성합니다.newImage.src = "..."— 표시할 이미지 파일의 URL을 지정합니다.addEventListener("click", ...)— 버튼 클릭 시점에 이미지 객체를 결과 영역(<div class="result">)에 추가합니다.
실행 결과
위 코드를 실행하면 초기 화면에는 제목과 버튼만 표시됩니다.
'클릭하세요' 버튼을 누른 후 —
버튼을 클릭하면 미리 생성해 둔 Image 객체가 문서에 추가되며, 지정된 크기(500×300)로 이미지가 화면에 나타납니다. 이미지는 페이지 로딩 시점에 미리 다운로드되므로, 클릭 즉시 빠르게 표시되는 것을 확인할 수 있습니다.
마무리
Image() 객체는 단순히 이미지를 동적으로 삽입하는 용도뿐 아니라, 갤러리·슬라이드쇼 구현, 이미지 로딩 완료 감지(onload 이벤트), 사전 로딩 최적화 등 다양한 상황에서 유용하게 활용됩니다. 자바스크립트로 이미지를 유연하게 제어하고 싶다면 꼭 익혀두는 것이 좋습니다.