다음목록 자동 로딩

티스토리에서 검색을하거나 카테고리를 눌렀을 때, 글 보관함을 눌렀을 때 나오는 검색화면에서 다음페이지 버튼 없이 스크롤하면 추가로 로딩되게 하는 스크립트입니다.

화면설정-화면출력에서 선택화면을 '목록만'으로 선택했을 때 이상없이 작동합니다.

MaterialT mark3 스킨에서 수정없이 사용하실 수 있습니다.

티스토리 날짜를 이쁘게 표시하기를 먼저 적용해야합니다.

티스토리 시간을 예쁘게 표시하기. 현재중심적 시간표시

.

적용하기

html의 </body> 위에 붙여넣으시면 됩니다.

<script>

/*

loadNextPage script by 뭐하라 (http://nubiz.tistory.com/611)

*/

function loadNextPage(){var e,d,b,a,c;e=$("#nextPage").attr("href");if(!e||$(".noMoreNext").length!==0){return false}$("#searchList ul").append('<svg class="spinner" width="30px" height="30px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>');d=function(){$.ajax({url:e,success:function(f){b=$(f);a=$(b).find("#nextPage").attr("href");c=$(b).find("#searchList ul li");$("#nextPage").attr("href",a);$("#searchList ul").append(c);initGetThumb();modDate("date");$(window).on("scroll",detectEndOfScroll);if(b.find(".no-more-next").length!==0){$("#nextPage").addClass("noMoreNext");$("#searchList ul").append("<li>목록의 마지막</li>")}$("#searchList .spinner").remove()},error:function(){e=decodeURI(e.substring(31,e.length-11));d()}})};d()}if(location.pathname.split("/")[1]=="category"||location.pathname.split("/")[1]=="search"||location.pathname.split("/")[1]=="archive"){$(window).on("scroll",detectEndOfScroll)}function detectEndOfScroll(){$("#nextPage").hide();if($("#searchList").length==0){$(window).off("scroll",detectEndOfScroll)}if(($(window).scrollTop()+$(window).innerHeight())>($("#searchList").outerHeight()+$("#searchList").offset().top+200)){$(window).off("scroll",detectEndOfScroll);loadNextPage()}};

</script>

주석이 달린 소스코드도 제공하니 수정하실분들은 수정해서 사용하세요.

/*

loadNextPage script by 뭐하라 (http://nubiz.tistory.com/611)

*/

function loadNextPage(){

var nextPageUrl,f,htmltoparse,nextPage,searchList;

nextPageUrl=$("#nextPage").attr("href");//다음페이지 url 가져오기

if (!nextPageUrl||$(".noMoreNext").length!==0){return false;}//더이상 로딩할 페이지 없음

//로딩 표시 넣기

$("#searchList ul").append('<svg class="spinner" width="30px" height="30px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>');

f=function(){

$.ajax({

url: nextPageUrl,

success: function(r){

htmltoparse=$(r);

nextPage=$(htmltoparse).find("#nextPage").attr("href");//다음페이지에서 그 다음 페이지 url 받아오기

searchList=$(htmltoparse).find("#searchList ul li");

$("#nextPage").attr("href",nextPage);

$("#searchList ul").append(searchList);

initGetThumb();//썸네일 첨가 함수

modDate("date");//날짜 표시 수정 함수

$(window).on("scroll",detectEndOfScroll);//스크롤 이벤트 다시 붙이기

if (htmltoparse.find(".no-more-next").length!==0) {//다음 페이지 없으면 마지막표시

$("#nextPage").addClass("noMoreNext");

$("#searchList ul").append("<li>목록의 마지막</li>");

}

$("#searchList .spinner").remove();//로딩 제거

},

error: function(){

nextPageUrl=decodeURI(nextPageUrl.substring(31,nextPageUrl.length-11));//다음페이지 url이 js로 들어있는 경우 url다시정의, 재시도

f();

}

});

}

f();

}

//검색목록 화면에서만 작동

if(location.pathname.split("/")[1]=="category"||location.pathname.split("/")[1]=="search"||location.pathname.split("/")[1]=="archive") $(window).on("scroll",detectEndOfScroll);

function detectEndOfScroll(){

$("#nextPage").hide();//다음페지이 버튼 숨기기

if ($("#searchList").length==0){

$(window).off("scroll",detectEndOfScroll);//검색 목록 화면 없으면 이벤트 떼기

}

if(($(window).scrollTop()+$(window).innerHeight())>($("#searchList").outerHeight()+$("#searchList").offset().top+200)){

$(window).off("scroll",detectEndOfScroll);//목록 마지막부분 스크롤되면 이벤트 떼고 로딩 시작

loadNextPage();

}

}