Tumblr Masonry与PXU Photoset问题

当我使用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://sofzh.miximages.com/javascript/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 }); }); 

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

任何帮助深表感谢，

谢谢。

Answer 1

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

此外，您还需要确保在 Masonry首次传递主题之前 ，Photoset插件正在运行。