LOAD CMS images ONLY when visible?

Is it possible to only load CMS images/ items when they are visible? I had a 6 CMS collections, each which has 15 image, and 7 CMS collection items ~ 630 images. These were all on the same page and VH - but only with one visible at a time. Low and behold, it was crashing the browser because they all loaded at the same time.

Is there a way to only load these CMS objects when their css is unhidden?


[Here’s my sharing link]

Webflow - Clair Music)

(I had to reduce it to two pieces so that it wouldn’t crash)

Loading that many images on a page load will certainly kill the browser. For large galleries I opt for lightboxes (with a small thumbnail) using Webflow’s element or a third party which I prefer. Fancyapps Fancybox (commercial) is present on many of my image rich sites. See Fancybox | fancyapps.com which I often combine with Cloudinary or Imgix services for ease of deployment and management.

There are plenty of alternatives available.

Hello Jeff!

Thank you for the help. So to confirm, there is no way to natively load images when they are visible?

best!

Esteban Suarez

Clair Music, Co-Founder
Duke Alumni, 2020
Clair Website
App Demo Video
Pitch Deck

Well that is what the browser does. Webflow supports lazy loading and when your browser supports it (most modern) that happens unless you choose eager. See New images set to lazy load by default | Webflow Features

Jeff,

Got it! Alright well I’ll look into the options you told me about. And to confirm again, with those I will be able to load images only when they’re unhidden?

Esteban Suarez

Sorry, but I am not following your description. Look at the demo’s to arrive at your answer. I am off to work a project.