SKIN/스크랩

묘연 티스토리 스킨에 Infinite Scroll 적용하기

2019.06.11 11:25

스크롤을 내리면 바로 다음 목록이 불러와지는 기능입니다. (페이지 더 보기 기능과 비슷하죠)

이 기능은 개인 사용은 무료지만, 상업용으로는 유료이기 때문에 적용해드릴 수 없어
직접 설치 및 설정을 하셔야합니다.

 

Infinite Scroll

New! JavaScript and jQuery plugin to automatically add next pages.

infinite-scroll.com

이 페이지에서 CDN 주소를 둘 중 하나만 복사합니다.
min이 붙은 주소가 파일 용량이 조금 더 작습니다.

스킨 편집 > html편집 > 스크롤을 맨 아래로 내려서

</s_t3> 위에 붙여넣거나, <script src="./images/script.js"> 부근에 붙여 넣습니다.
그 후 붙여넣은 CDN 스크립트 바로 아래 밑에 소스를 복사 후 붙여넣기 합니다.

<script>
 $('.myoskin.inner').infiniteScroll({
     path: '.next',
     append: '.myoskin .item',
     hideNav: '.pagination',
     history: false,
 });
</script>

 

- 제작한지 오래 된 스킨이나 일부 스킨은 구조에 따라 적용이 되지 않을 수 있습니다.
(위에 적혀진 클래스명과 다른 오래된 스킨, 구조가 다른 경우는 #container에 position:fixed 값이 있는 주로 부분 스크롤 형으로 보여집니다)

 

 

imagesLoaded

imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 4,500 Demo Add images Reset demo Edit this demo or vanilla JS demo on CodePen. Just to keep things inte

imagesloaded.desandro.com

더불어 이 소스와 함께 적용하면 더 예쁘게 사용할 수 있습니다 (만 저는 아직 이 소스에 대해 잘 모릅니다 ㅠㅠ)

comment 2

구매 스킨 수정 문의 - 각 스킨 안내 페이지 공개 댓글 / 나눔 스킨 수정 문의 - 답글 드리지 않습니다

  • BlogIcon Marshall K 2019.07.21 18:06 신고

    imagesLoaded는 보통 masonry와 함께 씁니다.

    const $container = $('.myoskin.inner');

    $container.infinitescroll({
    path: '.next',
    append: '.myoskin .item',
    hideNav: '.pagination',
    history: false
    },
    function(newElem) {
    const $new = $(newElem).css({opacity: 0});
    $new.imagesLoaded(function(){
    $new.animate({opacity: 1});
    $container.masonry('appended', $new, true);
    });
    })

    이런 식으로요.

    • BlogIcon 묘연、 2019.07.22 00:32 신고

      안녕하세요 Marshall K님!!
      이렇게 팁을 남겨주셔서 감사합니다 :)

      masonry에 imagesLoaded는 적용해서 사용하는데 여기에 Infinite Scroll까지는 적용을 어떻게 해야하는지 한참 예제를 찾아보고 적용을 해봐도 잘 모르겠었는데 시간 될 때 남겨주신 팁 이용해서 테스트 해보겠습니다 :)
      감사합니다~