Streaming live at 10am (PST)

Lazy Load Style


#1

Hello guys,

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 guys in advance.


Here is my public share link: https://preview.webflow.com/preview/folio2017?preview=5681d709235855e8ca92dcea3fe045c3
(how to access public share link)


#2

Hi @herardo, I checked on the published site, and for me it seem to be working on the first time in Chrome and Mac: https://cl.ly/010B1Y1d1y2a

Could you help to share which browser being used and what operating system?


#3

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.


#4

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: https://wiki.scratch.mit.edu/wiki/Help:Hard_Refresh

Also, try viewing the site in incognito mode in chrome, to see if maybe there is some extension interferring locally on your pc.

Regards,
Dave


#5

Hi,

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


#6

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


#7

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?


#8

Hi @herardo,

I don't see the problem either.


#9

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.


#10

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.


#11

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.


#13

It's just a dropbox link: "https://www.dropbox.com/s/niq385rqd8wmv1s/fade_example.mov?dl=0"

are you able to go to that link?


#14

Hi herardo,

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.
1. 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
2. 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.)


#15

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.


#16

No ... Only if you delete all your interactions. You can just leave them as they are.


#17

I'm sorry I'm not exactly understanding how to accomplish this?


#18

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.

Best,
Karl-Heinrich


#19

I tried your suggestion on this page:
http://folio2017.webflow.io/readz

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.


#20

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.

Best,
Karl-Heinrich


#21

I did everything you asked. This isn't working.