How to load image when I reach it after scrolling?

[mrdeveloper]

Hello, I just saw an animation effect of images on this site: https://fantastech.co/psd-to-wordpress/

If you load the page and scroll down the images gradually appear and are not loaded before hand. How can I achieve this with pure CSS and without using JavaScript?

Thanks in advance.

[JeroenR]

I would say this is impossible with CSS only. Why wouldn’t you want to use javascript for this?

[Secur3]

It’s called ‘Lazy Loading’. If you use WordPress there are some free plugins in their repository but there are also some for non WP sites too.

[mrdeveloper]

I did some research and see that we can give that use transform animations the fade effect. But have not found exact code for that.

@Secur3, the site I’m building is static HTML/CSS site. The client wanted it as a normal fast loading landing page.

@JeroenR, as I’m not using any Javascript libraries I wanted to avoid using it and looking for CSS approach. If there isn’t one, I’ll have to use some kind of JS library. Do you know of any good one?

[Secur3]

@mrdeveloper There are resources for non-WP sites too. There are about 5 listed on here:

https://www.pcrepairmansblog.com/lazy-loading-libraries-for-html-css-websites

but there are a few others available if you search. I have used Lazysizes without any problems and it’s quite lightweight.

I have never seen a CSS only approach that actually doesn’t load the image. Be careful, some CSS code may load the images but simply turn off visibility which won’t help.

[amipjonder]

I would say this is impossible with CSS only. Why wouldn’t you want to use javascript for this?

[mrdeveloper]

@Everyone, I actually ended up using Javascript to do this. Trying to search ways to do it without JS and in pure CSS was an unnecessary waste of time.

For those who read this in future, I ended up using : https://github.com/aFarkas/lazysizes to implement lazy load as suggested in the link shared by @Secur3.

[Charles Rem]

Thanks!

[Author]

Posts