Auslösen von fluffy.js

Question

Ich versuche, ein einfaches Tumblr-Thema mit dem flauschigen Plugin (https://github.com/mzdr/fluffy.js) zu machen, aber ich habe ein Problem festgestellt. Das Plugin wird nur einmal beim Laden der Seite ausgeführt. Ich versuche, es mit dem Infinite-Scroll-Plugin (http://www.infinite-scroll.com/) zu arbeiten, und ich brauche das flauschige Plugin, um auszulösen, wann immer neue Inhalte geladen werden.

Ich bin ziemlich neu, wenn es um JS geht, also schätze ich jede Hilfe, die ich bekommen kann. Vielen Dank.

bearbeiten hinzugefügt Code:

<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

Dies ist Ihr Glückstag! Ich habe gerade v2.1.0 freigegeben, die dein Problem behebt. Jetzt können Sie Fluffy Objekte on the fly so erstellen:

// 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]'); 

Vergessen Sie nicht die aktualisierte docs auszuchecken.