jQuery Masonry附加无限滚动重叠 - jQuery Masonry append overlapping with infinite scroll

jQuery Masonry append overlapping with infinite scroll

本文关键字：滚动重叠无限 Masonry jQuery | 更新日期: 2023-09-27

所以，我有一个允许无限滚动的脚本：

$(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();
            }
        });

它基于两个查询，一个用于前10个结果，另一个用于其余结果。问题是Masonry在页面刷新完成之前会重叠图像。。。当图像存储在缓存中时，它可以完美地工作，但在其他方面则不然。。。我该怎么解决这个问题？

尝试在.imagesLoaded（）中包装您的砖石调用

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

编辑

根据Masonry附录"imagesLoaded的工作原理是在加载了所有子图像后触发回调。"。因此，如果您在这个回调中运行并触发Masonry，它需要做的一切都应该已经加载。