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来解决您的问题。现在你可以动态创建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。

触发蓬松.js

1 个答案: