Jump to content

Cleaner page loading - Code block lazy loading?

Recommended Posts

Hi, 

I have built my portfolio website home page so that it is a grid of different colored rectangles, on hover each colour reveals an 'teaser' image from the project.

This is currently achieved using code blocks with an 'image swap' setup. Annoyingly it doesnt load very nicely - its glitchy and there is no fade in. 

Ideally, I would like each page to 'lazy load' cleanly, with no flicker, in a similar way to the Instagram grid on the play section of my website (which is an Instagram grid block and the default fade-in is very nice)

Any suggestions or help would be hugely appreciated please! 


https://www.dantonedesign.com/

Dan

Link to comment
  • Replies 8
  • Views 882
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS (just a test code for image blocks)

body.homepage {
.image-block:hover .image-block-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
    transition: all 0.3s ease;
}

.image-block:hover .image-block-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks! - that works as a generic hover image swap for image blocks on the home page

How can I now make this work for specific blocks so they change to specific images please?

Huge thanks in advance!


 

Edited by dantone1
Link to comment
On 8/1/2023 at 5:13 AM, dantone1 said:

Thanks! - that works as a generic hover image swap for image blocks on the home page

How can I now make this work for specific blocks so they change to specific images please?

Huge thanks in advance!


 

Use this new code

#image-block-id1 {
.image-block-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
    transition: all 0.3s ease;
}
&:hover .image-block-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}}

Replace #image-block-id1 with Image block id. You can use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan  I have managed to solve by just using inline image blocks and adjusting the description margin/padding... but a new issue had appeared on a couple of pages... Section height set to '0' used to look great for top sections as it sat was in-line with the bottom of  the header. suddenly it has started displaying the top of the top section below the header?

any idea how i can solve this please?

https://www.dantonedesign.com/

image.thumb.png.6a0140379386c844d8caea1ebaa544ea.pngimage.thumb.png.4e0d244a8105521b51ca6fe2bf7858f9.png

Edited by dantone1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.