gpt4 book ai didi

javascript - masonry 事件 : Call event after imagesLoaded and layoutComplete

转载 作者:数据小太阳 更新时间:2023-10-29 05:38:26 24 4
gpt4 key购买 nike

这就是我想要做的。我有一个包含大量图像的网格,因此我将 imagesLoaded 库与 masonry 一起使用。

这是我的 CSS:

.grid {
opacity:0;
}

和 HTML:

<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>

这是我的 JS:

var $container = $('.grid');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
gutter: '.gutter-sizer'
});
$container.masonry('on', 'layoutComplete', function(){
console.log('got here');
$container.animate({'opacity':1});
});
});

我的目标是隐藏网格,直到加载所有图像且布局完成,然后淡入。出于某种原因,在我上面的代码中,它永远不会进入 on layoutComplete block 。

如果我将该 block 移到 imagesLoaded 之外,则 $container.masonry 在该点未定义。

有什么想法吗?

FIDDLE HERE

如果将网格不透明度更改为 1,您可以看到一切都布置得很好。只是想弄清楚如何让 layoutComplete 调用以将不透明度设置为 1。

最佳答案

您不需要在 masonry 上使用 layoutComplete 事件。因为您可以在 masonry 初始化下添加动画代码。

当所有图片加载完成后,imageLoaded 函数就会执行。然后,您可以像这样创建砖石对象并立即设置动画:

var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
columnWidth: 200,
itemSelector: '.item',
gutter: 10
});
console.log('got here');
$('.grid').animate({'opacity':1});
});

这是一个jsfiddle证明

关于javascript - masonry 事件 : Call event after imagesLoaded and layoutComplete,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28371548/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com