How to implement lazy loading in images to web pages?

[costalesja11]

Hello There,

Would like to ask for assistance, does anyone knows how to implement lazy loading in images (referring to hubl images tags) to web pages?

I have found this link in the community but seems that the questions was not answered thou there was a section that was marked as solution, https://community.hubspot.com/t5/CMS-Development/how-to-implement-lazy-loading-in-hubspot-pages-not-....

This article, https://www.bluleadz.com/blog/lazy-loading-images-on-hubspot helps but looks like its good to use if you are working with <img> tags and not for hubl image tag.

If someone knows how to implement lazy loading with hubl image tags please let me know.

Thank you,
Julie Costales

[jmclaren]

For those who find this thread in the future. Image fields in custom modules support lazy loading now. 

We recommend implementing browser level lazy loading and our default snippet for the image field uses it.

[dhirajpandey]

Here is a nice jQuery plugin for lazy loading. 

http://jquery.eisbehr.de/lazy/

[jennysowyrda]

Hi @costalesja11,

I wanted to share a few resources with you to get you started: 

1. Lazy loading images-the complete guide

2. Lazy loading images

Let me know if this doesn't fully answer your question, and I can tag in some subject matter experts!

Thanks,
Jenny

[costalesja11]

Hi @jennysowyrda ,

Thank you for your help. It seems that there is no hubl way to add lazy load to its images and I think the only option is use a js library. And I've decided to use lozad.js.

Best Regards,
Julie Costales

[defranco]

if you use AMP dont use these lazy load images like lozad  on blog post images. Or the Hubspot AMP parser will remove all your images on AMP pages.

This happens due when converting <img> tags to <amp-img> Hubspot will strip completely all tags that dont have a valid src property. Also it will strip and data-src property. So no images will be displayed on AMP pages.