Jump to content

Gallery section: smooth fade in of thumbnails after complete loading

Recommended Posts

With the gallery section, it has always bothered me that when a gallery page is loaded for the first time, the thumbnails that first become visible in the browser window do not fade in smoothly as expected only after they are fully loaded, but that they load normally, quite jerkily in extreme cases. With a slow internet connection, you can even watch the line buildup of the individual thumbnails. This is not visually appealing. With the gallery block, as used in blogs, this behavior does not occur, here the thumbnails fade in smoothly, and only after they have been fully loaded in the background.

As I said, the problem is not noticeable with a fast internet connection, but it is with a slow one. Try setting throttling with the Webdeveloper tool using network analysis: now the unsightly, jerky loading of the thumbnails becomes visible.

After seeing that the parent element figure gets an attribute after the image has finished loading, I was able to use custom CSS code to fix the problem for me. This is the code I put in the head of the page that contains the gallery section, hence the style tags. But of course you can also insert custom CSS globally and address the corresponding section with its ID.
 

<style>
figure.gallery-grid-item {opacity: 0;}
figure.gallery-grid-item[data-loaded="true"] {opacity:1; transition: opacity 1s ease;}
</style>

Now each thumbnail is smoothly fading in after the loading is complete, even with very slow internet connections.

Link to comment
  • Replies 0
  • Views 302
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.