[javascript] PhotoSwipe와 Ajax를 이용한 이미지 로딩 방식 설명

22 Nov 2023

javascript

이번 포스트에서는 PhotoSwipe라는 JavaScript 이미지 갤러리 라이브러리와 Ajax를 결합하여 이미지를 로딩하는 방식에 대해 설명하겠습니다.

PhotoSwipe란?

PhotoSwipe는 모바일 기기와 데스크톱에서 사용할 수 있는 반응형 이미지 갤러리 라이브러리입니다. 사용자들에게 멋진 화면을 보여주는 UI와 사용하기 편리한 제스처 제어를 제공합니다.

Ajax를 이용한 이미지 로딩

PhotoSwipe 갤러리에 이미지를 로딩하는 가장 흔한 방법은 이미지 URL 배열을 미리 로드하고, 사용자가 갤러리 이미지를 클릭할 때 해당 이미지를 로드하는 것입니다. 이 방식은 초기 로딩 시간을 최소화하여 사용자 경험을 향상시킬 수 있습니다.

PhotoSwipe와 Ajax를 결합하여 이미지를 로드하기 위해서는 다음 단계를 따르면 됩니다:

JSON 파일이나 서버에서 이미지 URL의 배열을 가져옵니다.
사용자가 이미지를 클릭했을 때, 선택된 이미지의 index를 얻은 후 해당 index로부터 이미지 URL을 가져옵니다.
가져온 이미지 URL을 사용하여 Ajax 요청을 보내 이미지를 불러옵니다.
이미지가 로딩되면 PhotoSwipe에 추가하여 갤러리에 보여줍니다.

다음은 JavaScript 코드의 예시입니다:

// 이미지 URL 배열을 가져오는 Ajax 요청
function loadImages() {
  $.ajax({
    url: 'url_to_json_or_server',
    dataType: 'json',
    success: function(data) {
      var images = data.urls;
      initGallery(images);
    }
  });
}

// PhotoSwipe 갤러리 초기화
function initGallery(images) {
  var pswpElement = document.querySelectorAll('.pswp')[0];
  var items = [];

  for (var i = 0; i < images.length; i++) {
    items.push({
      src: images[i],
      w: 0,
      h: 0
    });
  }

  // 갤러리 옵션 설정
  var options = {
    index: 0
  };
  
  // PhotoSwipe 초기화
  var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
}

// 이미지 클릭 이벤트 핸들러
$('.image').on('click', function() {
  var index = $(this).data('index');
  loadImagesByIndex(index);
});

// 선택된 이미지의 URL을 가져오는 Ajax 요청
function loadImagesByIndex(index) {
  $.ajax({
    url: 'url_to_json_or_server',
    dataType: 'json',
    success: function(data) {
      var imageUrl = data.urls[index];
      loadImage(imageUrl);
    }
  });
}

// 이미지 로드 및 PhotoSwipe에 추가
function loadImage(imageUrl) {
  var img = new Image();
  img.onload = function() {
    var item = {
      src: imageUrl,
      w: img.width,
      h: img.height
    };
    gallery.items.push(item);
    gallery.updateSize(true);
  };
  img.src = imageUrl;
}

결론

이상으로 PhotoSwipe와 Ajax를 이용한 이미지 로딩 방식에 대해 알아보았습니다. 이 방법을 사용하면 사용자에게 원활하고 빠른 이미지 갤러리 경험을 제공할 수 있습니다. PhotoSwipe 공식 문서와 Ajax에 대한 추가적인 학습을 통해 더욱 다양한 기능을 적용해보세요.

PhotoSwipe란?

Ajax를 이용한 이미지 로딩

결론

참고 자료