Question

我有一个tumblr，其中我使用javascript和tumblr的主题操作符{photoUrl-250}根据其显示的帖子大小加载不同的图片网址， {photoUrl-400}等。用户bfred.it showed me how，但我很快就遇到了他的解决方案的问题，即它不会像保罗爱尔兰人那样工作{{3 }}。我有点理解我需要做什么，即在无限滚动完成加载后再次调用脚本，但是我在围绕＆＃34;如何＆＃34;。

时遇到了问题。

我对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的祖父母，我想传递作为我的函数的参数......但是如何？（在图像加载后，我已经有了对包装库的回调）

$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

这就是我所做的：我在＆＃34; brick＆＃34;中添加了一个id。 div与div postid-XXXXXX的编号相同。使用主题运算符{PostID}。

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

我的无限滚动代码然后将＆＃34; postid＆＃34; +数字传递给函数：

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

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

添加函数到无限滚动回调

1 个答案: