添加无限滚动回调函数

Question

我有一个 tumblr，其中我根据图像出现的帖子大小加载不同的 url，使用 javascript 和 tumblr 的主题运算符

{photoUrl-250}

、

{photoUrl-400}

等。用户 bfred.it 显示我如何，但我很快就遇到了他的解决方案的问题，即它不能按原样与 Paul Irish 的无限滚动 一起工作。我有点明白我需要做什么，即在无限滚动完成加载后再次调用脚本，但我在思考“如何”时遇到了问题。

我对 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 的祖父母......但是如何呢？ （我已经有一个 Packery 库的回调after图像已加载）

$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();
    });
});

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