티스토리 썸네일 불러오기 함수 - nubizAjax
티스토리에서 썸네일을 얻는 치환자를 제공하지 않고 있기 때문에 대부분의 스킨개발자들은 이를 위해 각 게시글주소에 ajax를 요청하여 썸네일 이미지를 불러오고있습니다.
부족한 실력이지만 지금부터 소개해드릴 nubizAjax는 불필요한 요청수를 최소화하고, 다운로드 용량도 최소화하는데 목표를 두고 제작되었습니다.
jQuery를 이용한 parsing에서 해당주소에 포함된 모든 컨텐츠를 다운로드하는 단점을 개선했습니다.
현재 게시글주소를 통한 썸네일과 댓글작성자의 파비콘도 불러올 수 있습니다.
효과
같은 페이지에서 스크립트를 바꿔가며 캐시없이 새로고침하여 측정한 결과입니다.
네트워크 상태가 좋지 않아서 로딩시간은 오히려 길어진 것 처럼 나왔네요.. 요청수와 다운로드사이즈 중심으로 봐주시면됩니다.
▲nubizAjax, 116 request, 1.8 MB
▲기존 방식 136 request, 3.1MB
▲ 썸네일 로딩하지 않을 때 89 request, 1.4MB
Html
html 예시는 다음과 같습니다.
붉은색 표시된 부분이 함수에서 사용하는 부분입니다.
<a href="/게시글 주소" class="na naThumb">
<img src="" alt="thumbnail" class="thumb" onerror="this.src='/favicon.ico'">
게시글 제목
</a>
<a href="/게시글 주소#코멘트ID" class="na naCommentorThumb" target="_self">
<img src="" alt="thumbnail" class="thumb" onerror="this.src='/favicon.ico'">
코멘트
<div class="info">
<span class="name">코멘터이름</span> ㆍ
<span class="date">시간</span>
</div>
</a>
JavaScript(jQuery)
//.na에 대해 ajax 수행
//예, 530번글 썸네일주소: nubiz["/530"].thumb
// 코멘터 객체: nubiz["/530"].commentors
// 코멘터 이름 파비콘주소: nubiz["/530"].commentors["이름"]
var nubiz={};
var nubizList=[];
var nubizAjaxCount=0;
function initNubizAjax(){
//링크수집, 중복제거
var anchors=[];
$.each($(".na"),function(i,e){
anchors.push(nubizTrimUrl(e.href));
});
$.each(anchors, function(i, e){if($.inArray(e, nubizList) === -1) nubizList.push(e);});//중복제거
for (var i=0;i<nubizList.length;++i) {
nubizAjax(nubizTrimUrl(nubizList[i]));
}
}
function nubizTrimUrl(u){//pathname 반환
var p = document.createElement('a');
p.href = u;
return p.pathname;
}
function thumbSizing(url, size) {
if(!url){return url}
var s = url.replace("image", size);
s = s.replace("original", size);
return s;
}
function nubizAjax(u){
var obj={};
var commentors={};
$.ajax({
url:u,
success:function(r){
r=r.replace(/src/g,"NOsrc");//src 요청 금지
var htmltoparse=$(r);
//썸네일, 댓글 이미지
obj.thumb=$(htmltoparse).filter("meta[property='og:image']").attr("content");//대표이미지 주소
if (!obj.thumb){obj.thumb=$(htmltoparse).find("article img").first().attr("NOsrc");}//대표이미지 없으면 첫 번째 이미지
$(htmltoparse).find(".name a").each(function(i,el){
commentors[$(el).text().trim()]=$(el).parent().find("[alt='BlogIcon']").attr("NOsrc");
});//commentors 정보 수집
obj.commentors=commentors;
nubiz[u]=obj;
nubizAjaxCount++;
if (nubizAjaxCount===nubizList.length) insertThumbs();
},
error:function(){},
});
}
function insertThumbs(){
$(".na.naThumb").each(function(i,e){
var thumb=nubiz[nubizTrimUrl(e.href)].thumb;
thumb=thumbSizing(thumb,"C50x50");
$(e).children(".thumb").attr("src",thumb);
});
$(".na.naCommentorThumb").each(function(i,e){
var name=$(e).find(".name").text().trim();
var thumb=nubiz[nubizTrimUrl(e.href)].commentors[name];
thumb=thumbSizing(thumb,"C50x50");
$(e).children(".thumb").attr("src",thumb);
});
}
initNubizAjax();
스킨에 따라 insertThumbs() 부분을 수정해서 쓰시면 될 것 같습니다.
Todo
작명..
RSS에 먼저 요청하여 요청수, 다운로드용량 더욱 줄이기
추가로 로딩된 개체에 대해서도 썸네일 삽입할 수 있는 수단
