fluffy.jsのトリガー

Question

ふわふわのプラグイン（https://github.com/mzdr/fluffy.js）を使って簡単なtumblrテーマを作ろうとしていますが、問題が発生しました。プラグインはページのロード時に一度だけ実行されます。無限のスクロールプラグイン（http://www.infinite-scroll.com/）で動作させようとしています。新しいコンテンツが読み込まれるたびに、ふわふわしたプラグインが必要になります。

JSについてはかなり新しいので、私が得ることができることに感謝します。ありがとう。

編集コードを追加しました：

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script> 
<script src="http://static.tumblr.com/hpghjri/co2nfnr1j/infinitescroll.min.js"></script> 
<script src="http://static.tumblr.com/nxwjyyg/XWUob8gtq/fluffy.min.js"></script> 

<script> 

$(function(){ 
    app.initInfinite(); 
    app.onImagesLoad();  
}); //end document ready 

var app = { 
    'initInfinite' : function() { 
     var $container = $('.page-index .posts'); 
     $container.infinitescroll({ 
      navSelector:".pagination", 
      nextSelector:".pagination-next", 
      itemSelector:".posts__container", 
      appendCallback:true, 
      loading:{ 
       finishedMsg:" ", 
       img:"data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==", 
       msg:null, 
       msgText:" ", 
       selector:null, 
       finished:function() { 

       } 
      } 
     }, 

     function(newElements) { 
      var $newElems = $(newElements).css({opacity:0}); 

      var $newElemsIDs = $newElems.map(function() { 
       return this.id; 
       Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs); 
      }).get(); 

      $newElems.imagesLoaded(function() { 
       $newElems.animate({opacity: 1}); 

       //what to do when new elems appended 
       // I need to trigger fluffy here 
      }); 

      var $newElemsIDs = $newElems.map(function() { 
       return this.id; 
      }).get(); 

      Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs); 

     });    
    }, 
    'onImagesLoad' : function() { 
     $('.content .posts').imagesLoaded() 
      .always(function(instance) { 
       console.log('all images loaded'); 
       $('.overlay').addClass('hide'); 
       $('.overlay__preloader').attr('class', ''); 
      }) 
      .done(function(instance) { 
       console.log('all images successfully loaded'); 
      });    
    } 
}   

</script> 

Answer 1

これはあなたの幸運な日です！私はちょうどあなたの問題を解決するv2.1.0をリリースしました。今、あなたはそのような場でふわふわのオブジェクトを作成することができます。

// Start automatic detection 
Fluffy.detect(); 

// Or provide a DOM node for single creation 
var myElement = document.querySelector('#what-ever-you-like'); 

Fluffy.create(myElement); 

// Or use a selector to create one 
Fluffy.create('[data-fluffy-container]'); 

が更新docsをチェックアウトすることを忘れないでください。