1

我正在制作一个像 pinterest 这样的音乐分享网站。

我使用 Masonry 来制作网格布局和 Infinite-Scroll 加载下一页。当我单击音乐专辑时，它会弹出一个灯箱（使用 fancybox）并使用 ajax 加载一些信息。

在第一页上，一切正常。但是当我点击一个音乐专辑，关闭它并向下滚动页面后，新加载的部分有这个问题：$newElems.imagesLoaded is not a function

我不知道如何解决这个问题。

任何帮助将不胜感激！

这是我的代码：

var $container = $('#container');
// masonry init
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.item',
    columnWidth: 100
  });
});
// ancybox fancybox
function init(){
    $("a.inline").fancybox({ 

         'transitionIn' : 'fade',
                 'transitionOut' : 'none',
                 'speedOut' : 0,
                 'hideOnOverlayClick': true,
                 'hideOnContentClick': false,
                 'overlayColor' : '#FFF',
                 'overlayOpacity' : 0.5,
                 'showCloseButton' : true,
                 'showNavArrows' : false
         });
}

init();

$container.infinitescroll({
  // infinitescroll init
  navSelector  : '#page-nav',    
  nextSelector : '#page-nav a',  
  itemSelector : '.item',    
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // infinitescroll callback
  function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, {
       isAnimated: false
       }, function () {
          // for new loaded part
              init();
         });

    });
  }
);
4

0 回答 0