javascript - 向无限滚动回调添加功能

我有一个tumblr，其中使用javascript和tumblr的主题运算符{photoUrl-250}，{photoUrl-400}等，根据显示的帖子大小加载不同的图像URL。用户bfred.it showed me how ，但是我很快就遇到了他的解决方案的问题，即保罗·爱尔兰（Paul Irish）的infinite-scroll不能按原样工作。我有点理解我需要做什么，即在无限滚动完成加载后再次调用该脚本，但是我在围绕“方式”问题上遇到了问题。

我对javascript的理解很差，但这就是我修改bfred.Code的程度。它慷慨地帮助了我。

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

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

最佳答案

这就是我所做的：我在“砖墙” 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();
    });
});

这很有效，尽管它似乎使任何不包含图片的帖子都变得很糟糕，但是修复起来可能不会太难。

关于javascript - 向无限滚动回调添加功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23883474/