photoswipe thumbnail to original image aspect ratio 문제

photoswipe로 이미지를 표시할때, 썸네일 이미지와 원본 이미지 비율이 틀린 경우에 문제가 눈에 거슬리는 문제가 있습니다.

 

비율이 동일한 경우(보통 동일하게 맞추지만)나, 썸네일 to 썸네일 이미지를 표시할때는 자연스럽게 화면이 전환됩니다.

문제는 썸네일보다 원본의 가로 비율이 더 높은 경우인데, 전환시 마지막에 원본 이미지로 표시되도록 썸네일을 지우는데,

이 처리가 진행될때, 하단 이미지가 잘려나가는듯한 느낌으로 잠시 표시됩니다.

(말로는 설명하기 어렵고 나중에 문제되는 화면을 동영상이나 gif 를 업로드 해야 겠네요.)

 

 photoswipe 옵션값을 조정하여 처리가 가능한지 찾아봤지만, 원하는 걸 찾지 못했습니다.

해외 게시글이나, github 이슈를 봐도 동일한 문제를 겪은 사람은 있는것 같은데, 제가 원하는 해결책은 없는것 같네요.

 

크롬 디버거로 한참 테스트 하다가, 이미지가 잘려나가는(원본이미지로 교체되는) 함수가 setTimeout 으로 호출되는것을 확인하였고,

해당 timeout 값이 고정값인 1000 으로 셋팅된걸 확인하였습니다. 이 값을 줄이면, 눈에 거슬리는 잔상(?)이 빨리 진행되어 문제가 발생되지 않을것으로 생각되어 수정후 테스트를 해보았습니다.

 

수정한 코드는 아래와 같습니다.

removePlaceholder() {
    this.placeholder && !this.keepPlaceholder() && setTimeout((() => {
        this.placeholder && (this.placeholder.destroy(), this.placeholder = void 0)
    }), 1e3)
}

//1e3 = 1000 임으로  10 정도로 고쳐줍니다.

removePlaceholder() {
    this.placeholder && !this.keepPlaceholder() && setTimeout((() => {
        this.placeholder && (this.placeholder.destroy(), this.placeholder = void 0)
    }), 10)
}

 

100% 자연스럽진 않지만, 기존에 부자연스럼이 많이 사라져서 이대로 적용하였습니다.