触发 fluffy.js

Question

我正在尝试使用 fluffy 插件 (https://github.com/mzdr/fluffy.js) but I've ran into a problem. The plugin only executes once on page load. I'm trying to get it to work with the infinite scroll plugin (http://www.infinite-scroll.com/) 制作一个简单的 tumblr 主题，我需要 fluffy 插件在新内容加载时触发。

我对 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 解决了您的问题。现在您可以像这样即时创建 Fluffy 对象：

// 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。

触发 fluffy.js

Triggering fluffy.js

javascript

jquery

tumblr

infinite-scroll