PhotoSwipe는 웹 앨범 형식으로 이미지를 감상할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 화면에 표시되는 이미지만 로딩하여 효율적으로 렌더링할 수 있어 사용자 경험을 향상시킬 수 있습니다. 이번 포스트에서는 PhotoSwipe와 연동하여 이미지 레이지로딩을 구현하는 방법에 대해서 알아보겠습니다.
1. PhotoSwipe 설치
PhotoSwipe을 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 PhotoSwipe을 프로젝트에 추가해주세요.
npm install photoswipe
2. 이미지 레이지로딩 구현하기
PhotoSwipe은 기본적으로 이미지를 lazy loading하는 기능을 제공합니다. 대부분의 브라우저에서 파일을 다운로드하지 않고 이미지의 주소만 가지고 있는 상태로 유지하며, 해당 이미지를 보여주기 위해 필요한 시점에 비로소 파일을 다운로드합니다.
아래는 PhotoSwipe을 사용하여 이미지 레이지로딩을 구현하는 코드 예시입니다.
// 해당 이미지의 src를 datasrc 속성으로 옮김
var images = document.querySelectorAll('.pswp__img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.setAttribute('src', img.getAttribute('datasrc'));
}
// PhotoSwipe 초기화
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = []; // 이미지들의 정보를 담을 배열
// 이미지들의 정보를 items 배열에 추가
var thumbnails = document.querySelectorAll('.thumbnail');
for (var i = 0; i < thumbnails.length; i++) {
var thumb = thumbnails[i];
var item = {
src: thumb.getAttribute('href'),
w: thumb.getAttribute('data-width'),
h: thumb.getAttribute('data-height')
};
items.push(item);
}
// PhotoSwipe 열기
var options = {
index: 0 // 처음에 보여줄 이미지의 인덱스
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
위 코드에서는 pswp__img 클래스를 가진 이미지들의 src 속성을 datasrc 속성으로 이동시키고, thumbnail 클래스를 가진 링크들을 기반으로 items 배열에 이미지 정보를 추가합니다. 마지막으로 PhotoSwipe 객체를 생성하여 이미지를 보여줍니다.
3. 참고 자료
PhotoSwipe 공식 문서를 참고하면 더 다양한 기능과 설정을 알아볼 수 있습니다. PhotoSwipe을 사용하여 이미지 레이지로딩을 구현하면 웹 사이트의 성능을 향상시킬 수 있으니, 많은 사용자들이 웹 앨범을 감상하는 동안 스무스한 경험을 제공할 수 있습니다.