Question

我最近在javascript上苦苦挣扎并且说实话：我对此并不是很了解。

my tumblr上的帖子宽度为350像素，但由于照片集使用的是iframe，我正在寻找不同的照片解决方案，并找到了这段代码：

<script type="text/javascript">
//This will change the source address and display the correct size.
    $newElems.imagesLoaded(function(){
            $(".photoset").each(function() { 
        var newSrc = $(this).attr("src").replace('500','350');
        $(this).attr("src", newSrc);       
    });
}
//This will get the new size of the iframe and resize the iframe holder accordingly.
$newElems.imagesLoaded(function(){
    $(function(){
    var iFrames = $('.photoset');
    function iResize() {
        for (var i = 0, j = iFrames.length; i < j; i++) {
            iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
        }

        if ($.browser.safari || $.browser.opera) { 
            iFrames.load(function(){
                setTimeout(iResize, 0); 
            });

            for (var i = 0, j = iFrames.length; i < j; i++) {
                var iSource = iFrames[i].src;
                iFrames[i].src = '';
                iFrames[i].src = iSource;
            }
        } else {
            iFrames.load(function() {
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            });
        }
    });
}

当我访问我的博客时，它工作得非常好现在我们来解决我的问题：我的tumblr使用infinite scroll plugin。每当我向下滚动时，一大堆图片就会被加载，如果加载了一个photoset，它不再调整大小，它将以默认大小显示。

我一直在寻找解决方案多年，尝试调整javascript代码，但我不明白它的任何内容。我在网上找到的唯一一件事就是this，这也没有帮助，我真的希望有人能在这里帮助我，我会感激不尽。

提前感谢您！

Answer 1

使用无限滚动功能，您需要将现有内容中使用的所有方法应用于新内容，在本例中为iFrames()和.photosets。这可以通过无限滚动提供的回调来完成。

根据文档（http://www.infinite-scroll.com/）：

$('#content').infinitescroll({
    navSelector  : "div.navigation",
    nextSelector : "div.navigation a:first",
    itemSelector : "#content div.post" },
    // callback
    function( $newElems ){
    // Do stuff to new posts / $newElems
    });
});

$newElems将包含添加到dom的所有新内容。现在只在新内容上直接使用您的方法。

我建议重新加工iFrames()，以便它接受一个元素数组，因此可以调用多个元素。

tumblr自定义photoset大小与无限滚动

1 个答案: