Triggering fluffy.js

Question

J'essaye de faire un thème tumblr simple en utilisant le plugin moelleux (https://github.com/mzdr/fluffy.js) mais j'ai rencontré un problème. Le plugin ne s'exécute qu'une seule fois lors du chargement de la page. J'essaye de l'obtenir pour fonctionner avec le plugin de défilement infini (http://www.infinite-scroll.com/) et j'ai besoin du plugin moelleux pour se déclencher chaque fois que le nouveau contenu se charge. Je suis assez nouveau quand il s'agit de JS, donc j'apprécie toute aide que je peux obtenir. Merci.

Modifier ajouté le 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

Ceci est votre jour de chance! Je viens de publier v2.1.0 qui résout votre problème. Maintenant, vous pouvez créer des objets Fluffy à la volée comme ça:

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

Ne pas oublier de vérifier la mise à jour docs.