INJE BLOG
WASTING YOUR TIME
SINCE 2017
오랜만에 티스토리를 다시 시작했는데 새로 바뀐 에디터에서 gif를 올리면 이미지가 움직이지를 않더라고요... 그래서 페이지 코드를 확인해 보니까 이전 에디터에서는 사용하지 않던 srcset을 사용하더군요.
srcset은 화면 크기에 따라 다른 크기의 이미지를 불러와서 이미지가 깨지지 않으면서도 이미지 파일의 크기가 필요 이상으로 커서 로딩 속도가 느려지는 것을 방지하는데 쓰이는데요. 이 다른 크기의 gif들로 변환하면서 이미지가 움직이지 않게 되는 것 같아요.
원본 gif는 잘 움직이는데 srcset 주소의 이미지는 안 움직이는게 보이시죠?
그래서 저는 이렇게 간단히 jQuery 코드를 추가해서 해결했답니다. 이 코드를 스킨편집에 들어가셔서 <head>태그 안에 붙여 넣어 주시면 gif 가 움직일 거예요
<script>
$(document).ready(function() {
$("img[data-filename*='.gif']").removeAttr("srcset");
});
</script>
혹시 블로그에 jQuery를 사용 안 하시고 계시면 이 코드도 같이 붙어 넣어 주시면 돼요
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>