I have a site layout and I’m adding a fade in effect to most things as users are scrolling down(like a lazy load effect). This doesn’t seem to work when you go to the site or any of the pages the very first time but when you refresh it works properly. I hope that makes sense. You can only really test it (see it’s not working) when you go to any of the pages the very first time. How can I make this work properly?
Thank you CyberDave first of all. I’ve tried it in chrome and safari on multiple machines and whenever I open up any of the pages on my site they don’t lazy-load the very fist time the page is viewed.
Hi, could you please post the published url to the site? When I checked the site on the webflow.io url: http://folio2017.webflow.io, I could not observe the issue.
Also, Webflow does not have a “Lazy Load” feature, so just to be clear, you are referring to the scroll interactions that are making the elements visible on scroll correct?
I would also suggest to do a hard refresh in the browser: Scratch Wiki
Also, try viewing the site in incognito mode in chrome, to see if maybe there is some extension interferring locally on your pc.
I am talking about this link as-well “http://folio2017.webflow.io” or you can also try clicking on the first few thumbnails and see what I mean. Also maybe you can try opening that link on another machine or another browser that you haven’t opened the link with and you’ll see what I mean.
I have done this in incognito mode and I’m not getting the problem happening there only in the times and situations that I mentioned.
Oh, and yes when I say lazy load I am referring to that scroll interaction as you mentioned
Hi @herardo, if the issue is not happening in incongnito mode, there might be an extension causing an issue.
I checked on Windows 10/Edge, Mac with Firefox, Mac with Safari and all gave me the same result, the scroll interactions seemed to work for me.
One thing that may help also, is to get a screenshot of your browser console and a screencast of the behavior. A good tool to use for this is https://getcloudapp.com
Got it thank you. Can you please do me a favor and open it up in on another machine other the the one you’ve been checking on and see if you get the problem to show up please?
Scroll interaction working fine for me as well for http://folio2017.webflow.io. Checked from chrome, firefox, opera and safari on OSX and all seemed to work the first time I visited the site.
Hi @herardo, thanks, I did as you suggested, and checked from a totally different machine, and that nice looking site is loading just fine for me.
As I mentioned before, if the issue is not happening in incognito mode, then there might be an extension or some other plugin in the browser, which is interferring with the page load.
Sometimes ad blocker extensions will cause a little havoc, so it might be good to check that. If the issue persists though, let me know and I will check further.
Thank you guys for checking. i think I might be doing a bad job explaining what the problem is. But whenever I open up any of the pages on the site. THe very first time the images load they load immediately and don’t fade in.
I’ve included a video recording to show you guys what I meen. please notice on the 8th second in the video I go to a page that has never been loaded on this computer and the problem happens. Hopefully this helps as this problem is pretty frustrating and difficult to explain.
yes thank you, I’ve realised that later on. Now I finally understand your problem. I suggest you use a page loader. This will look & feel exactly the same to your visitors, without the hassle of seeing the images load upon first load.
Quick instructions in case you don’t know how but it is really easy to do.
Create div with position:absolute; choose full and give it the same background color as you have on your website. Set z-index to the highest
recreate the effect in the screenshot
I did this and recorded a gif. Can you spot the difference? (Except for the Logo which is just visible because I didnt give the page loader a z-index.)
Thank you for showing me this. But this way seems that it would work fine but only for the elements at first on top of the screen. As you would scroll down all the elements would already be loaded and I wanted it to seem like things are loading as the user is scrolling down. Thank you in advance.
You just leave everything as it is right now. Then add a div, set it to position;absolute; … and so on and so forth. Just follow the steps described earlier. This will get rid of the problem you have and which made you start this thread in the first place.
So everything will stay as it is minus the problem you had. You are just fixing the first load problem. No more images popping in on first load.
The problem is, only things at the top of the screen load on first load of the page the rest of the elements are already loaded as I scroll down the page.
You forgot to make a tick at “Wait for assets to load”.
Do that and everything will be fine. Though you don’t need to manually set your div to 100vh, 100% and give it a margin. Just set it to “full” (the white square).
And then all of your problems will have disappeared.
