带有 PXU Photoset 问题的 Tumblr 砌体答案

【问题标题】：Tumblr Masonry with PXU Photoset Issue带有 PXU Photoset 问题的 Tumblr 砌体
【发布时间】：2014-03-10 01:47:11
【问题描述】：

当我将 Masonry 用于我的 Tumblr 主题时，我遇到了 PXU Photoset Extended 无法正确加载的问题。我知道是什么原因造成的，可惜我不知道如何解决它。

我发现加载 Masonry 时减少闪烁的唯一方法是使用 CSS (display:none) 隐藏容器，然后在加载 Masonry 脚本时取消隐藏它。

这似乎有 PXU Photoset 脚本无法正确渲染图像的奇怪副作用（它们大多被截断，并且在调整窗口大小时会跳到实际大小）。

所以我使用这段代码来调用 Masonry、ImagesLoaded 和 Infinite Scroll：

$(document).ready(function(){

    var $container = $('#container');

    $container.imagesLoaded(function(){
        $container.show();
        $container.masonry({
            itemSelector: 'article',
            gutter: 50,
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
        navSelector  : '#pagination-infinite',    // selector for the paged navigation
        nextSelector : '#pagination-infinite a.next',  // selector for the NEXT link (to page 2)
        itemSelector : 'article',     // selector for all items you'll retrieve
        animate: true,
        extraScrollPx: 310,
        bufferPx: 40,
        loading: {
            msgText: '',
            finishedMsg: '',
            img: 'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $container.masonry( 'appended', $newElems, true );
        });
    });

});

然后是 PXU Photoset Extended：

$(document).ready(function() {
$('.photo-slideshow').pxuPhotoset({
'rounded'   : 'false', // corners, all or false
}, function() {
// Callback
});
});

使照片集正确显示的唯一原因是移除显示：无；来自容器，但随后 Masonry 在页面加载时再次从容器中闪烁，我似乎无法以其他任何方式修复。

非常感谢任何帮助，

谢谢。

【问题讨论】：

标签： javascript jquery css tumblr jquery-masonry

【解决方案1】：

PXU Photoset 插件要求页面上的照片集可见，以便计算可用区域。不要在容器上使用display: none;，而是尝试使用visibility: hidden;，然后在砌体完成后将其更改为visibility: visible;。

此外，您需要确保 Photoset 插件在 Masonry 首次通过您的主题之前运行。

【讨论】：