php - jQuery Masonry 追加与无限滚动重叠

Question

所以，我有这个允许无限滚动的脚本:

$(document).ready(function() {
        function last_id_funtion() {
            var ID = $(".elemento:last").attr("id");
            $.post("2HB.php?action=get&id=" + ID,
                    function(data) {
                        if (data != "") {
                            var $boxes = $(data);
                            //$(".elemento:last").after(data);
                            $("#corpo").append($boxes).masonry('appended', $boxes, 'reloadItems');

                        }
                    });
        };

        $(window).scroll(function() {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                last_id_funtion();
            }
        });

它基于 2 个查询，一个用于前 10 个结果，另一个用于其余。 问题是在页面刷新完成之前，Masonry 会重叠图像......当图像存储在缓存中时，它可以完美运行，但否则...... 我该如何解决这个问题？

Answer 1

尝试将砌体调用包装在 .imagesLoaded() 中

$("#corpo").imagesLoaded(function(){
  $("#corpo").append($boxes).masonry('appended', $boxes, 'reloadItems');
});

编辑

根据Masonry Appendix “imagesLoaded 通过在加载所有子图像后触发回调来工作。”。因此，如果您运行，您会在此回调中触发 Masonry，它需要执行的所有操作都应该已经加载。