Tumblr Audio&视频+无限滚动

时间:2012-09-13 11:03:34

标签: audio video scroll tumblr infinite

我经历了一系列已经问过/已回答的问题,但它仍然不适合我。这是我到目前为止所做的。

static.tumblr.com/epkyugq/C0ym8qnir/jquery-1.7.1.min.js

masonry.desandro.com/jquery.masonry.min.js

masonry.desandro.com/js/jquery.infinitescroll.min.js

static.tumblr.com/epkyugq/4fmmajupw/decker.js

我不确定我做错了什么,或者是否需要添加它的权利和东西,但如果有人能告诉我一步一步的教程如何去做,我将非常感激。我是一个视觉人,所以我需要看到所有的编码。感谢您抽出宝贵时间阅读本文,并感谢您的回答。

1 个答案:

答案 0 :(得分:1)

您的修复发生在infinitescroll脚本之外。您应该将其更改为包含它,如下所示:

// other stuff up here
}, function( newElements ) {

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

    $newElems.imagesLoaded(function () {
        $newElems.animate({
            opacity: 1
        });
        $container.masonry('appended', $newElems, true);
    });

    /* repair video players*/
    $newElems.find('.video').each(function(){
        var audioID = $(this).attr("id");
        var $videoPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 10000,
            success: function(data){
                $videoPost.html(data.posts[0]["video-player"]);
            }
        });
    });

    /* repair audio players*/
    $newElems.find('.player').each(function(){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 10000,
            success: function(data){
               $audioPost.html(data.posts[0]["audio-player"]);
            }
        });
    });
});

我正在使用$newElems.find(),因为我们只想加载新页面的帖子。如果你只是$('.video'),你将浏览所有帖子,包括那些已经加载的帖子。