扩展SquareSpace Masonry图片网格显示：消除加载间隙技术问询

问题根源 #

你当前用display: none隐藏未加载的图片项，但Squarespace的Masonry布局引擎在初始化时已为所有网格项计算了位置，即使元素隐藏，容器依然会保留这些元素的占位空间，导致出现间隙。此外，仅靠触发resize事件刷新布局的方式不够精准，无法彻底同步已加载元素的布局状态。

解决方案步骤 #

1. 替换隐藏方式：用position: absolute + left: -9999px彻底将未加载元素移出文档流，避免占用布局空间；加载时恢复默认定位
2. 优化布局刷新：优先调用Squarespace内置的网格刷新方法（如果存在），替代仅触发resize事件
3. 同步加载状态：在加载批次时，确保元素的布局属性完全恢复后再触发懒加载和布局刷新

修改后的完整代码 #

window.addEventListener('load', function () {
    const sectionSelectors = [
        'section[data-section-id="670d92fec8f9260200a5123e"] .gallery-masonry-wrapper',
        'section[data-section-id="66e9e9df0edabc30f4b67062"] .gallery-masonry-wrapper'
    ];

    sectionSelectors.forEach(selector => {
        const galleryWrapper = document.querySelector(selector);

        if (!galleryWrapper) {
            console.warn(`Gallery wrapper not found for selector: ${selector}. Skipping...`);
            return;
        }

        const loadMoreButton = document.createElement('button');
        const imagesPerBatch = 11;
        let currentImageIndex = 0;

        loadMoreButton.innerHTML = "Load More";
        Object.assign(loadMoreButton.style, {
            display: 'block',
            margin: '20px auto',
            padding: '10px 20px',
            cursor: 'pointer',
            backgroundColor: '#000',
            color: '#fff',
            border: 'none',
            fontSize: '16px',
            textAlign: 'center'
        });

        galleryWrapper.parentElement.appendChild(loadMoreButton);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const imgElement = entry.target.querySelector('img');
                    if (imgElement) {
                        fadeInImage(imgElement);
                        observer.unobserve(entry.target);
                    }
                }
            });
        }, { threshold: 0.1 });

        function fadeInImage(imgElement) {
            imgElement.classList.add('lazy-image');

            imgElement.onload = () => {
                // 强制重排后触发淡入
                imgElement.style.transition = 'none';
                imgElement.offsetHeight;
                imgElement.style.transition = '';

                requestAnimationFrame(() => {
                    imgElement.classList.add('lazy-image-loaded');
                    triggerMasonryLayout();
                });
            };

            if (imgElement.complete) {
                imgElement.onload();
            }

            imgElement.src = imgElement.getAttribute('data-src');
        }

        function loadBatch(startIndex) {
            const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
            for (let i = startIndex; i < startIndex + imagesPerBatch && i < allItems.length; i++) {
                const item = allItems[i];
                // 恢复元素布局属性
                item.style.position = '';
                item.style.left = '';
                item.style.visibility = 'visible';
                observer.observe(item);
            }

            currentImageIndex += imagesPerBatch;

            if (currentImageIndex >= allItems.length) {
                loadMoreButton.style.display = 'none';
            }
            // 批量加载后延迟刷新布局，给浏览器足够处理时间
            setTimeout(triggerMasonryLayout, 100);
        }

        function hideAllImages() {
            const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
            allItems.forEach((item, index) => {
                if (index >= imagesPerBatch) {
                    // 彻底移出文档流，不占用布局空间
                    item.style.position = 'absolute';
                    item.style.left = '-9999px';
                    item.style.visibility = 'hidden';
                } else {
                    item.style.position = '';
                    item.style.left = '';
                    item.style.visibility = 'visible';
                }
            });
        }

        function triggerMasonryLayout() {
            // 优先调用Squarespace内置网格刷新方法，比resize更精准
            if (window.SS && window.SS.Grid) {
                window.SS.Grid.refresh(galleryWrapper);
            } else {
                // 降级使用resize事件触发重排
                window.dispatchEvent(new Event('resize'));
            }
        }

        hideAllImages();
        loadBatch(0);

        loadMoreButton.addEventListener('click', () => {
            loadBatch(currentImageIndex);
        });
    });
});

配套自定义CSS #

在Squarespace的自定义CSS面板中添加以下样式，确保懒加载图片的淡入效果正常：

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.lazy-image-loaded {
    opacity: 1;
}

关键说明 #

• 用position: absolute替代display: none，确保未加载元素完全不参与布局计算，从根源消除间隙
• 新增延迟布局刷新逻辑，避免浏览器因元素属性刚恢复就触发重排导致的计算偏差
• 优先调用Squarespace内置的网格刷新方法，比全局resize事件更精准控制布局重排范围
• 保留原有的懒加载淡入效果，同时确保布局状态与加载进度同步

内容的提问来源于stack exchange，提问作者user2163224