jquery - JQuery Masonry：通过 ajax 附加图像

Question

我有很多通过 ajax 加载的图像。我正在使用 masonry 和延迟加载插件来显示图像。通过一个 ajax 调用加载所有图像会导致问题并且页面卡住直到所有图像都被安排好，所以我在第一个 ajax 中加载 20 个图像调用，然后在这个一对一的 ajax 请求之后立即在每个调用中获取 10 个图像并通过 masonry append 进行附加。

function getMorePhotos () {
    $.ajax({
            type    : "POST",
            url     : site_url+'controller/ajax_get_photos',
            data    : ,
            complete: function(response)
                    {
                        if (response.responseText != '0' )
                        {
                            getMorePhotos();
                        }                       
                    },
            success : function(response) 
                {
                    if (response == '0' || response == '') {
                        
                    } else {
                        var temp = $(response).get();
                        temp.forEach(function( element, index ) {
                            $item = $(element);
                            $('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item );
                            $item.find("img.lazy").lazyload({
                                effect : "fadeIn",
                                threshold : 100
                            });

                        });
                        
                    }
                }
        });
}

这是第一次请求完成后的方法调用。

现在的问题是：第一个图像连续闪烁直到最后一个 ajax 请求完成。

我觉得这不是一个好的解决方案。有人可以建议吗？

我的<ul> <li>结构有四列。（见图）

Answer 1

true解决了问题。我在这里失踪了

$('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item, true);

设置 true 从底部动画附加图像。

我做的另一件事是计算图像高度并在附加之前将其设置在图像 css 中，它将避免重叠。我将很快发布现场演示。

感谢您宝贵的时间:)

Answer 2

如果您的物品中有图像，请使用带有砖石的 imagesLoaded ( http://imagesloaded.desandro.com/ )。以下代码对我有用

//Initiate  maosnry
$container = $('#container');
$container.imagesLoaded(function(){ 
    $container.masonry({
        itemSelector: '.item'
    }); 
});

//and on ajax call append or prepend more items
var $data = $(data).filter(".items");   
$container.prepend($data).imagesLoaded(function(){
    $container.masonry( 'prepended', $data, true );
});