Lazy Page Loading For Image Sections?

Dada78 · October 7

Site URL: https://fish-mayflower-586h.squarespace.com/curations/the-body-abstracted-obscured

Hi there,
I have a page that has several image sections with 2-3 images each. Up to 20 sections.

Is there a way to add lazy loading to the page by having let's say 5 sections display on first load and then load 5 more etc by adding a "load more" button?

How would I go about this?

PW: testing78

Any help with this much appreciated! Thanks!

bycrawford · October 7

Hey! I know you can do this with summary blocks via this plugin - may be worth asking them if it can be applied to your sections too

tuanphan · October 7

I created a quick demo for your case here

https://tuanphan-demo01.squarespace.com/section-load-more-1?noredirect

Pass: abc

(Load more button under Section 3)

You can use these steps

#1. First, use this code to Page Header Injection

In case Page doesn't Header Injection, you can edit Page > Use a Code Block

<style>
button#show-more {
    display: block;
    text-align: center;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
        $(document).ready(function() {
            $('article section.page-section').hide(); 
            $('article section.page-section').slice(0, 3).show(); 
            $('article section.page-section:last-child').after('<button id="show-more">Show More</button>');
            $('#show-more').click(function() {
                $('article .page-section:hidden').slice(0, 3).slideDown(); 

                if ($('article .page-section:hidden').length === 0) {
                    $(this).hide(); 
                }
            });
        });
    </script>

#2. Adjust the code

Code will show first 3 sections + hide other sections, when click Load More, it will load the next 3 sections. You can adjust it here

Edited October 7 by tuanphan
typo

Dada78 · October 7

Oh great, thanks so much @tuanphan, will implement it today and report back!

When I inject the code, onto that page is it page specific, or would I need to target a particular page somehow, as I don't need this feature on all pages.

Thank you!

tuanphan · October 7

53 minutes ago, Dada78 said:

Oh great, thanks so much @tuanphan, will implement it today and report back!

When I inject the code, onto that page is it page specific, or would I need to target a particular page somehow, as I don't need this feature on all pages.

Thank you!

If you add code to Code Block or Individual Page Header Injection, the code will run on that page only.

Dada78 · October 8

How would I be able to implement this lazy loading feature for a masonry image grid section to display on the first 5 images for example and a "load more" button?

Site: https://fish-mayflower-586h.squarespace.com/ PW: testing78

Thanks so much!

tuanphan · October 8

8 hours ago, Dada78 said:

How would I be able to implement this lazy loading feature for a masonry image grid section to display on the first 5 images for example and a "load more" button?

Site: https://fish-mayflower-586h.squarespace.com/ PW: testing78

Thanks so much!

I don't think code will work properly with Masonry

But you can try this code to Homepage Header Injection

<style>
button#show-more {
    display: block;
    text-align: center;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
        $(document).ready(function() {
            $('figure.gallery-masonry-item').hide(); 
            $('figure.gallery-masonry-item').slice(0, 5).show(); 
            $('section:has(.gallery-masonry)').after('<button id="show-more">Show More</button>');
            $('#show-more').click(function() {
                $('figure.gallery-masonry-item:hidden').slice(0, 5).slideDown(); 

                if ($('figure.gallery-masonry-item:hidden').length === 0) {
                    $(this).hide(); 
                }
            });
        });
    </script>

Dada78 · October 9

Thanks, I used the code, but unfortunately the section doesn't auto-expand to accommodate the additionally loaded images upon click to "load more".

https://fish-mayflower-586h.squarespace.com/
PW: testing78

tuanphan · October 10

14 hours ago, Dada78 said:

Thanks, I used the code, but unfortunately the section doesn't auto-expand to accommodate the additionally loaded images upon click to "load more".

https://fish-mayflower-586h.squarespace.com/
PW: testing78

You can use this new code, it still doesn't work, you can remove both code, I can test easier.

<style>
button#show-more {
    display: block;
    text-align: center;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('figure.gallery-masonry-item').hide();
    $('figure.gallery-masonry-item').slice(0, 5).show();
    
    $('section:has(.gallery-masonry)').after('<button id="show-more">Show More</button>');
    
    $('#show-more').click(function() {
        $('figure.gallery-masonry-item:hidden').slice(0, 5).slideDown();

        // autoscroll to refresh page
        $('html, body').animate({ scrollTop: $(window).scrollTop() + 1 }, 0);
        $('html, body').animate({ scrollTop: $(window).scrollTop() - 1 }, 0);

        // 
        if ($('figure.gallery-masonry-item:hidden').length === 0) {
            $(this).hide();
        }
    });
});
</script>

Dada78 · October 10

Thanks @tuanphan, tried it and unfortunately no luck with this code.

I removed it so it might be easier for you to check it out. Thanks so much for looking into it!

tuanphan · October 10

3 hours ago, Dada78 said:

Thanks @tuanphan, tried it and unfortunately no luck with this code.

I removed it so it might be easier for you to check it out. Thanks so much for looking into it!

New code doesn't do anything, or it runs it creates problem or?

Dada78 · October 10

New code doesn't do anything different. Gallery Wrapper (or section) still doesn't expand to accommodate for subsequently loaded images, but I have figured it out now and am sharing it with anyone who needs it:

Inject this into your site's footer:

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Target the gallery wrapper
    const galleryWrapper = document.querySelector('.gallery-masonry-wrapper');
    
    // Check if the gallery wrapper exists
    if (!galleryWrapper) {
        console.error("Gallery wrapper not found.");
        return;
    }

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

    // Create the "Load More" button with some basic styling
    loadMoreButton.innerHTML = "Load More";
    loadMoreButton.style.display = "block";
    loadMoreButton.style.margin = "20px auto";
    loadMoreButton.style.padding = "10px 20px";
    loadMoreButton.style.cursor = "pointer";
    loadMoreButton.style.backgroundColor = "#000";
    loadMoreButton.style.color = "#fff";
    loadMoreButton.style.border = "none";
    loadMoreButton.style.fontSize = "16px";
    loadMoreButton.style.textAlign = "center";

    // Insert the button after the gallery masonry wrapper
    galleryWrapper.parentElement.appendChild(loadMoreButton);

    // Function to load images in batches of 6
    function loadMoreImages() {
        const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
        
        for (let i = currentImageIndex; i < currentImageIndex + imagesPerBatch && i < allItems.length; i++) {
            const imgElement = allItems[i].querySelector('img');
            
            // Make sure to use the data-src attribute to lazy load images
            if (imgElement && imgElement.getAttribute('data-src')) {
                imgElement.src = imgElement.getAttribute('data-src');
                imgElement.style.display = 'block';  // Show the image if hidden
            }
            
            allItems[i].style.display = 'block';  // Show the corresponding gallery item
        }

        currentImageIndex += imagesPerBatch;

        // Trigger a re-layout for the Masonry grid after images load
        triggerMasonryLayout();

        // Hide the "Load More" button if all images have been loaded
        if (currentImageIndex >= allItems.length) {
            loadMoreButton.style.display = "none";
        }
    }

    // Function to initially hide all images except the first batch
    function hideAllImages() {
        const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
        allItems.forEach((item, index) => {
            if (index >= imagesPerBatch) {
                item.style.display = 'none';
            }
        });
    }

    // Function to trigger the Masonry layout recalculation
    function triggerMasonryLayout() {
        const event = new Event('resize');  // Simulate a window resize
        window.dispatchEvent(event);
    }

    // Initial setup: hide all images except the first batch
    hideAllImages();
    loadMoreImages();  // Load the first batch of images

    // Event listener to load more images on button click
    loadMoreButton.addEventListener('click', loadMoreImages);
});

   
</script>

Edited October 10 by Dada78
Found my own solution

Lazy Page Loading For Image Sections?

Recommended Posts

Dada78

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

bycrawford

tuanphan

Dada78

tuanphan

Dada78

tuanphan

Dada78

tuanphan

Dada78

tuanphan

Dada78

Create an account or sign in to comment

News

tuanphan

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources