Hey Team,
So I’ve got a slider on my site which contains some hefty images. I do plan on optimizing them more before I launch the site…
The issue I’m running into is that the images in the slider do not appear until they scroll into the viewport, even if the website has already fully loaded. This delay happens pretty much the exact same whether I scroll to the section immediately or wait 30 seconds (to give it time to load), which is why, although the images are large, it seems that there is some image load or appearance delay related either to the slider element or the css I’ve used on it.
This is more of a problem on mobile browsers.
Obviously, I would like the images to load and appear immediately without waiting until they scroll into the viewport so that the experience is smooth for users.
Can someone take a look and give me ideas on how to make the slider images load/appear asap instead of waiting until they are in the viewport? This is more of a problem on mobile browsers than desktop.
The slider element is in: websites-container
Read-only link: https://preview.webflow.com/preview/austinshockley?preview=901cf6dc6424b6c09946d90e774f1566
Side note: The images are set as background images and if the images are cached, you may not see the delay I’m talking about. Also, it’s more obvious and problematic on mobile browsers.
Thanks for your help!
-A