无限滚动加载动画无法运作

我使用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

无限滚动加载动画无法运作

回答

相关问题