How to defer offscreen images in hubspot?

SOLVE
Highlighted
Occasional Contributor

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

2 Accepted solutions

Accepted Solutions
Highlighted
Regular Advisor | Platinum Partner

@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!

dennis
Highlighted
Top Contributor

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

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.
7 Replies 7
Highlighted
Community Manager

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

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi Sharon,

 

I am still waiting for the help.

 

Thanks,

Kiran

Reply
0 Upvotes
Highlighted
Community Manager

Hey @kiran_shirsat 

 

Thank you for letting me know. 

 

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

 

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

 

Thank you 

Sharon 

Highlighted
Visitor | Platinum Partner

Hello there,

 

Is there any news with that subject?

 

Thanks

Reply
0 Upvotes
Highlighted
Regular Advisor | Platinum Partner

@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!

dennis
Highlighted
Top Contributor

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

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.
Highlighted
Occasional Contributor

Thanks a lot to all for suggestions...

Reply
0 Upvotes