0

我最近一直在努力使用 javascript，老实说：我对此一无所知。

我的 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 使用了无限滚动插件。每当我向下滚动时，就会加载一堆新图片，如果加载了照片集，则不再调整大小，而是以默认大小显示。

我多年来一直在寻找解决方案，试图调整 javascript 代码，但我对此一无所知。我在网上找到的唯一东西就是这个，这也无济于事，我真的希望有人能在这里帮助我，我将不胜感激。

先感谢您！

4

1 回答 1

0

使用无限滚动，您需要将现有内容上使用的任何方法应用于新内容，在本例中为iFrames()and .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()，使其接受一组元素，因此可以调用多个元素。

于 2013-09-23T13:30:17.687 回答