I’m trying to do something which seems like it should be quite simple, but for some reason I’m not able to get it to work!
On my site I have a series of images like the #buckminsterImage below, projects I have worked on.
However the number and size of the images slows down initial website loading, so I would like to hide them initially and load them later on. I’ve done this by setting the default value to “hidden”:
I would then like to choose an element further up the page to act as the trigger to load these images, using the onViewportEnter function. So far I’ve tried using the h2 heading in this strip as a trigger, or the strip itself:
export function casestudyHeader_viewportEnter(event) {
$w('#buckminsterImage').show
}
It seems to me that this should be incredibly simple, but when I run the code and scroll down until the trigger enters my viewport, nothing happens!
I’ve also tried this using .collapse and .expand, and that didn’t work either. I even tried the reverse of starting off with the element being visible, and then hiding it when the trigger enters the viewport. Still nothing happens!
The point of this is so that the images don’t need to fully load before the hero section does, so that the website feels fast, and then elements load when they’re needed as people scroll.
I’m trying to replicate a “lazy load” fuctionality, since that’s what Google Page Speed Insights recommended for me.
Any ideas on why it’s not working, and how to fix this?