無限滾動加載動畫無法運作

我使用Paul Irish的Infinite-Scroll jQuery plugin與Isotope結合使用。除了一件事外，它似乎運行良好：加載動畫完全不出現。另外，當您向下滾動時，原始分頁鏈接會顯示一秒，然後消失，並且在下一個「頁面」加載後第二秒左右。由於加載第二個「頁面」需要一秒鐘，所以我真的很喜歡加載動畫出現，以便用戶知道正在加載另一個頁面。我如何強制分頁鏈接不可見並且加載動畫出現？下面是我使用的代碼：無限滾動加載動畫無法運作

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

    });

編輯：在檢查頁，它看起來像裝DIV #infscr-loading加載頁面頂部的其他元素之下。但我不知道如何讓它在底部加載...

來源

2014-10-03 mcography

需要查看更多的代碼。怎麼樣一個jsFiddle？ – Macsupport 2014-10-03 20:39:03

以下是該網站：http://uic.slamagency.com/blog/ – mcography 2014-10-03 20:39:49

僅供參考，在Safari中，每次加載頁面時，您的站點都會導致下載masthead-teaser.ogv。分開，但你應該解決這個問題！加上該網站顯示同位素加載，但你在代碼中說明，石工？ – Macsupport 2014-10-03 20:51:50

我在這篇文章的幫助下發現了這個解決方案：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; 

}

來源

2014-10-10 15:37:48 mcography

無限滾動加載動畫無法運作

回答

相關問題