Бесконечная анимация анимации прокрутки не работает

Question

Я использую Paul Irish's Infinite-Scroll jQuery plugin в сочетании с изотопом. Кажется, что он работает хорошо, за исключением одного: анимация загрузки вообще не появляется. Кроме того, когда вы прокручиваете вниз, исходные ссылки на страницы отображаются на секунду, затем они исчезают, а через секунду или около того наступает следующая страница. Поскольку для загрузки второй страницы требуется секунда, мне бы очень хотелось, чтобы анимация загрузки отображалась так, что пользователь знает, что загружается другая страница. Как заставить невидимые ссылки на страницы и анимацию загрузки? Ниже приведен код, я использую:

// 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); 
     }); 
     } 
    ); 

    }); 

EDIT: При проверке страницы, это выглядит как погрузочная DIV #infscr-loading загружает в верхней части страницы под другими элементами. Но я не могу понять, как получить его для загрузки внизу ...

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; 

}