무한 - 스크롤로드 애니메이션이 작동하지 않습니다.

Question

나는 아이오와와 함께 폴 아일랜드의 Infinite-Scroll jQuery plugin을 사용하고 있습니다. 한 가지를 제외하면 잘 작동하는 것 같습니다.로드 애니메이션이 전혀 나타나지 않습니다. 또한 아래로 스크롤하면 원래 페이지 매김 링크가 잠시 표시되고 사라집니다. 다음 번 페이지가로드됩니다. 두 번째 '페이지'가로드되는 데 2 ​​초가 걸리기 때문에로드 애니메이션이 표시되어 사용자가 다른 페이지가로드되고 있음을 알 수 있습니다. 페이지 매김 링크를 보이지 않게하고로드 애니메이션을 표시하려면 어떻게해야합니까?

// Isotope (with Infinite Scroll) 
    $(function(){ 

    var $container = $('.isotope-container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector: '.isotope-item', 
     layoutMode: 'masonry' 
     }); 
    }); 

    // filter items on button click 
    $('#filters').on('click', 'button', function() { 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
    }); 

    $container.infinitescroll({ 
     navSelector : '.pagination', // selector for the paged navigation 
     nextSelector : '.next-post a', // selector for the NEXT link (to page 2) 
     itemSelector : '.isotope-item',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      msgText: "loading new posts", 
      img: 'http://i.imgur.com/6RMhx.gif', 
      selector: "#loading-animation" 
     } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 

    }); 

편집 : 아래는 내가 사용하는 코드입니다 페이지를 검사하면, 그것은이 #infscr-loading 다른 요소 아래에있는 페이지의 상단에로드로드 DIV 것 같습니다. 하지만 아래쪽에로드하는 방법을 알아낼 수 없습니다 ...

Answer 1

이 게시물의 도움으로이 솔루션을 찾았습니다 : http://wpquestions.com/question/show/id/8043.

#infscr-loading { 

    position: fixed; 

    bottom: 30px; 

    left: 42%; 

    z-index: 100; 

    background: white; 

    background: hsla(0, 0%, 100%, 0.9); 

    padding: 20px; 

    color: #222; 

    font-size: 15px; 

    font-weight: bold; 

}