Tumblr砌體與PXU Photoset問題

Question

當我為Tumblr主題使用Masonry時，我無法正確加載PXU Photoset Extended的問題。 我知道是什么原因造成的，可悲的是我不知道如何解決它。

我發現減少Masonry加載時閃爍的唯一方法是使用CSS隱藏該容器（顯示：無），然后在加載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：

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

使照片集正確顯示的唯一方法是刪除顯示內容： 從容器中移出，但隨后砌築再次在頁面加載時從容器中忽閃忽現，我似乎無法解決任何其他問題。

任何幫助深表感謝，

謝謝。

Answer 1

PXU Photoset插件要求頁面上的照片集可見，以便它可以計算可用區域。 而不是使用display: none; 在容器上嘗試使用visibility: hidden; 然后將其更改為visibility: visible; 砌體完成后。

另外，您需要確保Photoset插件在 Masonry首次通過您的主題之前正在運行。