javascript - 添加无限滚动回调函数

Question

我有一个tumblr我根据图像出现的帖子大小加载不同的图像网址，使用 javascript 和 tumblr 的主题运算符 {photoUrl-250}、{photoUrl-400}等..用户bfred.it showed me how ，但我很快就遇到了他的解决方案的问题，即它不能按原样与 Paul Irish 的 infinite-scroll 一起工作。 。我有点明白我需要做什么，即在无限滚动完成加载后再次调用脚本，但我在思考“如何”时遇到了问题。

我对 javascript 的理解相当差，但这就是我修改代码的程度，bfred.it 慷慨地帮助了我。

这就是我的帖子的设置方式:

<div id="content">
    {block:Posts}
        <div class="brick">
            <div class="article {block:Tags} {Tag} {/block:Tags}">
                {block:Photo}
                    <div id="postid-{PostID}" data-images="{PhotoURL-250},{PhotoURL-400},{PhotoURL-500},{PhotoURL-HighRes}" data-classes="{TagsAsClasses}"></div>
                    <script>
                    findPhotoUrl("postid-{PostID}");    
                    </script>
                {/block:Photo}
            </div>
         </div>
     {/block:Posts}
 </div>

这是调用添加图像的函数(实际上应该称为 insertImage 或其他名称，而不是 findPhotoUrl，但请耐心等待):

function findPhotoUrl(a)
    {
    var el=document.getElementById(a);    
    var sizes = el.getAttribute('data-images').split(',');
    var classes = el.getAttribute('data-classes');
    var imageIndex = classes.match(/\barticle(\d)\b/);
    if (!imageIndex){
        imageIndex=[0,1]//default to smallest size if nothing is specified
        }
    el.innerHTML='<img src="'+sizes[imageIndex[1]-1]+'" alt="'+imageIndex[1]+'">';
};

上面的工作非常出色，但问题是我不知道在哪里以及如何在无限滚动中调用 findPhotoUrl()...

下面是我的无限滚动设置。请注意，itemSelector 是 brick，它是 div 的祖 parent ，我想将其作为函数的参数传递...但是如何传递呢？ (图像加载后我已经有了packery库的回调)

$container = $('#content');
/* INFINITESCROLL */
    $container.infinitescroll({
        navSelector:    ".pagination",
        nextSelector:   ".pagination a:first-child",
        itemSelector:   ".brick",
    }, function( newElements ) {
$(newElements).imagesLoaded( function() {
    pckry.appended( newElements ); drawSpaces();pckry.layout();
    });
});

Answer 1

这就是我所做的:我向“brick”div 添加了一个 id，该 id 的编号与 div postid-XXXXXX 的编号相同。使用主题运算符{PostID}。

<div class="brick" id="brickid-{PostID}">

然后，我的无限滚动代码将“postid”+数字传递给函数:

$container = $('#content');
            /* INFINITESCROLL */
            $container.infinitescroll({
                navSelector:    ".pagination",
                nextSelector:   ".pagination a:first-child",
                itemSelector:   ".brick",
                //maxPage:        3,
                //prefill:        true,
            }, function( newElements ) {
                for (var i in newElements){
                    var b=newElements[i].id;
                    var c =b.substr(b.indexOf("-")+1);
                    findPhotoUrl("postid-"+c);
                }                    
    $(newElements).imagesLoaded( function() {
        pckry.appended( newElements ); drawSpaces();
        pckry.layout();
    });
});

这效果很好，虽然它似乎搞砸了任何不包含图片的帖子，但这可能不会太难修复。