当我为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
});
});
使照片集正确显示的唯一方法是删除显示内容:从容器中移出,但随后砌筑再次在页面加载时从容器中闪出,我似乎无法解决任何其他问题。
任何帮助深表感谢,
谢谢。
最佳答案
PXU Photoset插件要求页面上的照片集可见,以便它可以计算可用区域。不要在容器上使用display: none;
,而是尝试使用visibility: hidden;
,然后在砌体完成后将其更改为visibility: visible;
。
另外,您需要确保Photoset插件在Masonry首次通过您的主题之前正在运行。
关于javascript - Tumblr砌体与PXU Photoset问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22290802/