masonryを使いながらinfinite scrollを使って画像が重ならないようにする

FavMedia - Twitterのfavツイート画像閲覧 の開発で、userページで表示させる画像をinfinite scrollで読み込みつつ、Masonryでタイル状に整える時に読み込み途中の画像が重なって表示してなんか嫌だなぁと調べて解決した方法のメモ

ここのソースコード見れば一発ですがね http://desandro.github.io/masonry/demos/infinite-scroll.html

imagesloadedも使います

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script src="../js/jquery.infinitescroll.min.js"></script>
<script>
  $(function(){
    var $tiles = $('#tiles').css({ opacity: 0 });
    $tiles.imagesLoaded(function(){
      $tiles.animate({ opacity: 1 });
      $tiles.masonry({ itemSelector: '.tile' });
    });

    $tiles.infinitescroll({
      navSelector  : 'ul.pagination',
      nextSelector : 'ul.pagination a[rel=next]',
      itemSelector : '#tiles .tile',
      loading: {
        msgText: '',
        finishedMsg: '',
      }
    }, function( newElements ) {
      var $newElems = $( newElements ).css({ opacity: 0 });
      $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $tiles.masonry( 'appended', $newElems, true );
      });
    });
  });
</script>

.css({ opacity: 0 })の値を付けてやって、読み込み完了後に$tiles.animate({ opacity: 1 });を付けてあげれば良かったんですね。まぁそうですね(hideとshow駆使してがんばってた労力無駄だった)

えぇぇええ！！実際に動いてるところが見てみたいって！！？！？？？しょうがないなここ行けば見れるよー(宣伝)

http://www.favmedia.me/soramugi