[팁] 썸네일에서 움짤이 끝까지 재생되지 않을 때

NEW 73, 84 스킨부터 Fix 버전 업데이트 된 스킨까지 고용량 움짤이 대표 이미지로 설정된 경우, 리스트에서 썸네일로 출력될 때 끝까지 재생되지 않고 끊기는 문제가 생길 수 있습니다.

 

이는 티스토리가 썸네일 주소에 리사이징 파라미터를 붙여 이미지 크기와 프레임을 줄여 용량을 최적화하여 로딩시간을 줄이기 때문입니다.

 

썸네일 출력 방식을 바꾸면서 생긴 문제로, 일반 사진이나 낮은 용량의 움짤에는 거의 영향이 없습니다. 그래서 테스트 과정에서 저도 알아채지 못했습니다...!!😅🤕

 

하지만 움짤계를 운영하시는 분들은 꽤 불편하실 수 있는 부분입니다. 오류 문의를 받고 많은 분들이 참고하셨으면 하여 팁 글로 작성하게 되었습니다.

 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const thumbs = document.querySelectorAll('.thumb_i');

    thumbs.forEach(function (thumb) {
      let bg = thumb.style.backgroundImage;
      let match = bg.match(/url\(["']?(.*?)["']?\)/);

      if (match) {
        let url = match[1];
        let fnameMatch = url.match(/fname=([^&]+)/);

        if (fnameMatch) {
          // 퍼센트 인코딩된 fname 값 디코딩
          let originalUrl = decodeURIComponent(fnameMatch[1]);

          // background-image 속성에 원본 주소 적용
          thumb.style.backgroundImage = `url('${originalUrl}')`;
        }
      }
    });
  });
</script>

 

 

썸네일 이미지 주소에 자동으로 붙은 리사이징 파라미터를 제거하는 스크립트입니다. 썸네일 움짤 프레임 잘림 현상이 불편하신 분들은 해당 스크립트를 HTML 최하단 카피라이트 주석 아래, </s_t3> 위에 넣어주세요.

 

단, 해당 스크립트 적용 시 움짤 주소의 용량이 너무 크면 로딩 속도에 영향이 생깁니다. 이 부분 반드시 주의하고 사용해주세요!

 

고용량 움짤을 썸네일로 계속 올려야하시는 경우라면, 개인적으로 움짤을 제작하실 때 완성본과 똑같은 작은 사이즈를 하나 저장해서 썸네일용으로 사용하시는 것도 권장드립니다.

 

스킨 자체에 내장시키려고 했으나, 모든 썸네일을 원본 크기로 만들기 때문에 움짤이 아닌 고용량 이미지로 로딩 속도가 느려지는 경우도 있을 것 같아 필요하신 분만 추가할 수 있도록 이런 글로 작성했습니다. 양해 부탁드립니다.

 

썸네일 출력 관련으로는 앞으로 더 괜찮은 방법이 있을 때마다 업데이트가 생길 수 있습니다.