I am trying to implenent lazy image load functionality for image tag. Is there any way to implement lazy image load functionality in SXA while loading images on page?

  • This is not related to Sitecore. Should be closed and asked elsewhere Mar 20 '18 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 '18 at 7:38
  • You are correct @DawidRutkowski. I have retracted my vote Mar 20 '18 at 8:00

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

But here is one thing SXA SXA can help with. Rendering Variants supports tokens inside of the data attributes. Let's imagine that you have 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!

  • 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 '18 at 13:04
  • What do you mean by "use field type to render image"? Mar 20 '18 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 '18 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 '18 at 15:24
  • Ok. I will check and get back to you.
    – Amit Kumar
    Mar 20 '18 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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