How to defer offscreen images in hubspot?

SOLVE
kiran_shirsat
Participant

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
dennisedson
Solution
Community Manager

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

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

prosa
Solution
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.

View solution in original post

7 Replies 7
sharonlicari
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


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
kiran_shirsat
Participant

Hi Sharon,

 

I am still waiting for the help.

 

Thanks,

Kiran

0 Upvotes
sharonlicari
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 🙂

 

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

 

Thank you 

Sharon 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


okndmr
Member

Hello there,

 

Is there any news with that subject?

 

Thanks

0 Upvotes
dennisedson
Solution
Community Manager

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

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

prosa
Solution
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.

View solution in original post

kiran_shirsat
Participant

Thanks a lot to all for suggestions...

0 Upvotes