Loading pictures as they appear

Design help Custom code
1

Hi everyone,

Is there any way not to load pictures / sections until they are not hitting the viewport?

2

Yes, you’ll need to use interactions. Check out this page for a bunch of examples… https://interactions.webflow.com

3

Hi, which one are you refering to? If I set it to display none, and change it on scroll into view, doesn’t it load the picture at all until the interaction has been triggered?

4

Like this? Website interactions and animations | Webflow

5

Whoops, sorry, that’s the wrong tutorial link.

I’d use the scroll trigger and instead of setting display to none I’d use the opacity slider. Set that to 0% and then 100% on the scroll trigger.

6

Try watching this tutorial :smile:

http://tutorials.webflow.com/nav-appears-on-scroll

8

I’m looking for a solution, where the pictures don’t get loaded until hitting the viewpont, not just not displayed. So basically like a loading bar for each section. The page is allmost 10 MB and I’d like the sections to load as we scroll trough the site, not all at once in the beginning.

9

Woah! That’s huge. Maybe you should spend more time optimizing the images?

10

It’s due to a large number of animated gifs my client needs on the page. The images are all optimized with kraken.

11

ah. so you’re looking for a LazyLoader.

This maybe what you are looking for: Lazy Load Remastered

12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.