JQuery Masonry:通过ajax附加图像

Question

我有很多图像通过ajax加载.我正在使用砌体和延迟加载插件来显示图像.通过一个ajax调用加载所有图像导致问题和页面卡住直到所有图像得到排列,所以我在第一个ajax加载20个图像在这个逐个ajax请求之后,在每个呼叫中​​获得10个图像并通过砌体附加追加,然后立即呼叫.

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中,它将避免重叠.我将很快发布现场演示.

感谢宝贵的时间:)