[jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중)
안녕하세요. 오늘은 그냥 진행사항을 포스팅으로 남깁니다.
반응형웹을 사용 하면 어떻게 보면 많은 장점도 있지만 단점도 존재합니다.
단점 중에 하나가 바로 모바일 페이지에서 과도한 데이터사용(?)이랄까요?
그래서 대부분의 반응형웹은 매우 가볍게 만들어지기도 합니다.
하지만 본문의 포함된 이미지 크기까지 제어하기는 쉽지가 않습니다.
최근 자주 방문하는 오늘의유머 사이트는 모바일 페이지에서 1MB이상의 이미지는 클릭시에만 보이며,
스크롤이 내려갈때 가시영역에서만 이미지가 로드가 되게 해놓았습니다.
jQuery 기반(?)의 플러그인인 lazyload.js를 사용한 것 같은데...
티스토리에 스킨에 적용을 하려고 하니 안되네요.
만약에 티스토리 자체 모바일스킨을 사용하면 콘텐츠에 포함된 이미지들은
http://cocosoft.kr/m/post/400/slideshow?order=1
http://블로그주소/m/post/글주소/slideshow?order=숫자
이런식으로 바뀝니다.
R750x0 사이즈의 썸네일로 자동 포맷 되어지죠.
그런데 반응형웹 스킨일 때 모바일에서 접속시 이미지 크기를 줄이는 좋은 방법이 없을까? 고민을 하다가
새로 추가된 티스토리 썸네일 URL을 생각합니다.
티스토리는 다양한 크기의 이미지 및 썸네일을 제공합니다.
<원본크기>
https://t1.daumcdn.net/cfile/tistory/21320F4C56C4BC690D
https://t1.daumcdn.net/cfile/tistory/21320F4C56C4BC690D
<썸네일 크기>
http://cfile9.uf.tistory.com/R750x0/21320F4C56C4BC690DB8D0
http://cfile9.uf.tistory.com/C130x130/21320F4C56C4BC690DB8D0
…
http://cfile9.uf.tistory.com/이미지크기/21320F4C56C4BC690DB8D0
최근에 반응형웹스킨이 공개 되면서 새로운 썸네일URL이 추가되었죠.
자세한 사항은 해당 포스팅을 참고하세요.
http://cocosoft.kr/349 - [티스토리]이미지 썸네일 스킨치환자 소개
바로 이것입니다.
http://i1.daumcdn.net/thumb/이미지크기/?fname=
<사용예>
http://i1.daumcdn.net/thumb/R330x0/?fname=https://t1.daumcdn.net/cfile/tistory/21320F4C56C4BC690D
이런식으로 적용을 해주면 사용이 되는 것이죠.
포스팅을 작성하다보니 굳이.. 저 썸네일URL을 사용하지 않아도 되네요
<script type="text/javascript">
$(function() {
if($(window).width() <= 400) {
$(".post-content img").each(function() {
$(this).prop("src", $(this).prop("src").replace("image", "R330x0"));
});
}
});
</script>
이런식으로 400px이하의 해상도일때
post-content의 img태그의 src에 있는 image 를 R330x0으로 바꿔라라는 것인데
http://cfile9.uf.tistory.com/image/21320F4C56C4BC690DB8D0
↓
http://cfile9.uf.tistory.com/R330x0/21320F4C56C4BC690DB8D0
이렇게 바뀌겠죠??
문제는.. 모바일 페이지에서 줄어든 사이즈가 나타나기는 하는데...
원본이미지도 로드가 되고..
그다음 줄어든 이미지도 로드가 되게 된다는 점이죠..
결국 2개 중복으로 생기게 되므로 오히려.. 이방법은 현재 원본이미지를 로드 안하는 방법을 찾아야 하는데..
스크립트 실행 순서를 $(document).ready를 조절해봐도 안되고
이미지 로드를 막는 방법을 찾아보려고 해도 쉽지 않네요..
코딩 카페나 ㅠ_ㅠ 몇몇분들께 물어봐야겠네요.
고객센터에 문의를 해볼까나..
아무튼 지금 현재는 진행중입니다...
완성이 되면 다시 포스팅을 추가예정!!
