向无限滚动回调添加函数答案

【问题标题】：Adding function to infinite-scroll callback向无限滚动回调添加函数
【发布时间】：2014-05-27 07:29:29
【问题描述】：

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

我对 javascript 的理解相当差，但这就是我修改代码 bfred 的成果。它慷慨地帮助了我。

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

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

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

【问题讨论】：

我想出了一个解决方案，明天会跟进。

标签： javascript jquery tumblr getelementbyid infinite-scroll

【解决方案1】：

这就是我所做的：我在“brick”div 中添加了一个 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();
    });
});

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

【讨论】：