How to implement lazy image load

Question

I am trying to implement lazy image loading functionality for the img element. Is there any way to implement lazy image loading functionality in SXA while loading images on the page?

Answer 1

Yes, you can do it! I will skip the part of how lazy loading should work, as there are plenty of blog posts about it like:

• https://css-tricks.com/snippets/javascript/lazy-loading-images/
• https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

But here is one thing SXA can help with. Rendering Variants supports tokens inside of data attributes. Let's imagine that you have a few pages and each of those pages has an Image field of type Image. You want to display them using Page List and have all those images lazy loaded. In such case your rendering variant can look like this:

The $(Image) token will check if Image is an ImageField and contains media and if yes it will render a link to that media item like this:

Next, you'll need some JavaScript logic to lazy load those images and it's done!