扩展 SquareSpace Masonry 图像网格显示功能

Question

不幸的是，我选择使用 SquareSpace 进行网站建设，但从一开始就后悔了。它似乎缺乏基本功能，例如延迟加载图像和控制加载 Masonry 网格的图像。

这是我的问题：

对于此主页： https://fish-mayflower-586h.squarespace.com 密码：测试78

我已经注入了自定义代码以允许延迟加载功能，但我不知道如何控制图像显示。

基本上我想加载一定数量的图像（这就是我现在正在做的），但我希望包装器仅扩展到没有卸载图像的位置以防止这些间隙...

请在此处查看参考图片：

这就是我想为所有视口实现的目标：

非常感谢您提供有关如何实现这一目标的建议！ 谢谢！

这是代码：

  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) {
                        console.log('Observing image:', imgElement.src);
                        fadeInImage(imgElement);
                        observer.unobserve(entry.target);
                    }
                }
            });
        }, { threshold: 0.1 });

        function fadeInImage(imgElement) {
            imgElement.classList.add('lazy-image'); // Ensure opacity is initially 0

            // Ensure the transition is applied only after the image is loaded
            imgElement.onload = () => {
                console.log(`Image loaded: ${imgElement.src}`);
                // Force reflow before adding the class to trigger the transition
                imgElement.style.transition = 'none';  // Reset any transition
                imgElement.offsetHeight;  // Trigger reflow
                imgElement.style.transition = '';  // Restore transition

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

            if (imgElement.complete) {
                console.log('Image already complete, forcing onload');
                imgElement.onload();  // Handle cached images
            }

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

        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.display = 'block';  // Ensure the item is visible
                observer.observe(item);  // Start observing for lazy loading
            }

            currentImageIndex += imagesPerBatch;

            if (currentImageIndex >= allItems.length) {
                loadMoreButton.style.display = 'none';
            }
        }

        function hideAllImages() {
            const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
            allItems.forEach((item, index) => {
                item.style.display = index < imagesPerBatch ? 'block' : 'none';
            });
        }

        function triggerMasonryLayout() {
            const event = new Event('resize');
            window.dispatchEvent(event);  // Trigger a layout reflow for Masonry
        }

        hideAllImages();
        loadBatch(0);

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

Answer 1

我在这里使用 jQuery，因为您似乎可以在网站上使用它。

找到第一个未加载的图像，并获取其距顶部的偏移量。

var maxScroll = $($('.gallery-masonry-lightbox-link img:not(.lazy-image-loaded)').toArray()[0]).offset().top;

现在将容器的 maxHeight 设置为它并防止溢出：

$('.gallery-masonry-wrapper.gallery-masonry-list--ready').css("max-height",(maxScroll)+'px');
$('.gallery-masonry-wrapper.gallery-masonry-list--ready').css("overflow-y","hidden",true);

您可以定期重新运行上述代码（

setInterval

），重新检查图像是否已加载并展开容器（惰性方法），或者将其连接到您的砌体加载事件+ onclick “加载更多”按钮。