티스토리에서 썸네일을 얻는 치환자를 제공하지 않고 있기 때문에 대부분의 스킨개발자들은 이를 위해 각 게시글주소에 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에 먼저 요청하여 요청수, 다운로드용량 더욱 줄이기

    추가로 로딩된 개체에 대해서도 썸네일 삽입할 수 있는 수단

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon wallel
      2015.11.11 01:12 신고

      우연히 티스토리 공식 가이드 둘러보다 발견했는데요,

      이번에 새로 나온 치환자 관련 가이드가 있더군요!

      거기에 썸네일 출력하는 치환자가 있습니다!!!


      근데 가장 중요한건, 이놈의 가이드는 도대체 어떻게 이해하라고 쓴건지 모르겠네요 -ㅁ-;;

      • BlogIcon 뭐하라
        2015.11.11 09:01 신고

        헉 드디어 치환자가 나왔군요! 반가운 소식이네요

      • BlogIcon 뭐하라
        2015.11.11 09:08 신고

        어디있나요? 저는 못찾겠네요 ㅠㅠㅠ

      • BlogIcon wallel
        2015.11.11 13:32 신고

        http://www.tistory.com/guide/skin/step3#2-8-7

        요기 나와있어요~~~

      • BlogIcon 뭐하라
        2015.11.11 14:34 신고

        아 거기있군요 연구해봐야겠네요 ^^