이미지는 웹 페이지에서 중요한 역할을 담당합니다. 하지만 모든 이미지를 처음부터 모두 로드하는 것은 사용자 경험에 좋지 않을 수 있습니다. 특히, 페이지에 표시되는 이미지가 동적으로 변하는 경우에는 이미지를 필요한 시점에 로딩하는 것이 필요합니다. 자바스크립트에서 JSON 데이터를 사용하여 이미지를 동적으로 로딩할 수 있는 방법에 대해 알아보겠습니다.

1. JSON 데이터 구성

먼저, JSON 데이터를 구성해야 합니다. 이미지 URL들을 JSON 형식으로 저장하고, 필요한 데이터로 구성해야 합니다. 예를 들어, 다음과 같은 JSON 데이터를 사용해보겠습니다.

{
  "images": [
    {
      "id": 1,
      "url": "image1.jpg",
      "caption": "Image 1"
    },
    {
      "id": 2,
      "url": "image2.jpg",
      "caption": "Image 2"
    },
    {
      "id": 3,
      "url": "image3.jpg",
      "caption": "Image 3"
    }
  ]
}

이 예시에서는 이미지마다 고유한 ID, URL, 캡션을 가지고 있습니다. 실제로는 실제 이미지 URL을 사용해야 합니다.

2. 이미지 동적 로딩

이제 자바스크립트를 사용하여 JSON 데이터를 불러오고, 이미지를 동적으로 로딩하는 함수를 작성해보겠습니다.

function loadImages() {
  // JSON 데이터 불러오기
  fetch('images.json')
    .then(response => response.json())
    .then(data => {
      // 이미지 데이터 가져오기
      const images = data.images;
      
      // 이미지 로딩 및 표시
      images.forEach(imageData => {
        const image = new Image();
        image.src = imageData.url;
        image.alt = imageData.caption;
        document.body.appendChild(image);
      });
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

이 코드는 fetch()를 사용하여 JSON 데이터를 불러온 뒤, 이미지 데이터를 가져와서 동적으로 이미지를 생성하고 화면에 추가합니다. 각 이미지는 해당하는 URL과 캡션을 가지고 있습니다.

3. 이미지 로딩 함수 호출

마지막으로, 이미지 로딩 함수인 loadImages()를 호출하여 실행합니다.

loadImages();

이제 페이지가 로드될 때 JSON 데이터를 가져와서 동적으로 이미지를 로드하게 됩니다.

이 방법을 통해 자바스크립트에서 JSON 데이터를 사용하여 동적으로 이미지를 로드하는 방법에 대해 알아보았습니다. 이미지를 처음에 한꺼번에 모두 로드하는 것보다 필요한 이미지만 동적으로 로드하여 사용자 경험을 향상시킬 수 있습니다.