How to defer offscreen images in hubspot?

[kiran_shirsat]

Hi Folks,

on our datamatics website (https://www.datamatics.com), there is lazy-loading offscreen images, for this problem, we have found one solution through scripting code and attribute change name inside the <img> tag in HTML file. However, if we change attribute name of src to data-src in <img> tag, next time if we want to replace this image with new one, so this attribute name will change automatically to data-src or do we need to update it manually in HTML file?

or

Is there any other solution for how to defer offscreen images in hubspot?

if yes, then please suggest.

Best Regards,

Kiran S

[sharonlicari]

Hey @kiran_shirsat     

I apologize for the delay in getting back to you. I am wondering if you were able to resolve this or if you still need assistance on this matter?     

Thank you

Sharon

[kiran_shirsat]

Hi Sharon,

I am still waiting for the help.

Thanks,

Kiran

[sharonlicari]

Hey @kiran_shirsat 

Thank you for letting me know. 

I will tag a few experts that will be able to give you some tips 🙂

 Hey @DanielSanchez  @Kevin-C  could you please share your knowledge with @kiran_shirsat ?

Thank you 

Sharon 

[okndmr]

Hello there,

Is there any news with that subject?

Thanks

[dennisedson · Accepted solution]

@kiran_shirsat ,

Some good news for you..kind of.

Lazy loading is getting html support in modern browsers.  so you can add that attribute to your img tag

loading="lazy"

Unfortunately,  this probably doesnt cover all that you need so I would suggest adding a js backup.  I think it is pretty clearly laid out in this post.

So for your image tag, it would look something like this:

<img src="{{ image.src }}" data-src="{{ image.src }}" loading="lazy" />

now anytime you swap an image, it will update both the data-src and the src

hope that helps!

[prosa · Accepted solution]

Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.-- view source code and change the src with data-src and add the class lazy to your classes. here is and example

<img class="lazy" data-src="https://www...">

you can learn more here.

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

this is the lib I'm using

https://github.com/malchata/yall.js

[kiran_shirsat]

Thanks a lot to all for suggestions...