4

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?

3
  • This is not related to Sitecore. Should be closed and asked elsewhere Mar 20, 2018 at 5:35
  • I agree that lazy loading of images is not Sitecore related but SXA, in fact, can help achieve this. That's why I think this question makes sense here. Mar 20, 2018 at 7:38
  • You are correct @DawidRutkowski. I have retracted my vote Mar 20, 2018 at 8:00

1 Answer 1

12

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:

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:

enter image description here

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:

enter image description here

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

7
  • Thanks for the information David. In the above example instead of Div variant section can I use field type to render image?
    – Amit Kumar
    Mar 20, 2018 at 13:04
  • What do you mean by "use field type to render image"? Mar 20, 2018 at 13:29
  • It means, when we are creating Rendering items then we are getting options to create Section/Date/Field/Query/.. When Field item created then we can mentioned field name from Template which holds the image.
    – Amit Kumar
    Mar 20, 2018 at 14:10
  • What I hear is that you are asking about using data attribute tokens inside of other variant items like Field, Date or any other. If that was the question then yes, you can use in all variant items which has Data Attribute field. There is just one issue with HTML Tag variant item - data attribute tokens are not fully working there. It's already fixed in 1.7. Mar 20, 2018 at 15:24
  • Ok. I will check and get back to you.
    – Amit Kumar
    Mar 20, 2018 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.