CMS Development

Mattg1
Membre

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

Hi,

 

I am trying to make the images on our homepage lazyload to increase the page speed. I added the data-src html attribute to a few images and added the JS code in a seperate file and added it to the template. The links to the images are from Hubspot's files. The lazyloading does not seem to be working and I think the data src is the problem. Anybody have an answer to this?

 

Thanks

0 Votes
2 Solutions acceptées
MFrankJohnson
Solution
Leader d'opinion

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

Here's another resource (from the guys at BluLeadz in 2018) that may still have value for you.

- see Lazy Loading Images on HubSpot

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com

Voir la solution dans l'envoi d'origine

0 Votes
stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

@benfoster it's possible, but you have to use your own custom modules instead of using the default HubSpot modules in order to control the image markup.

Stefen Phelps, Community Champion, Kelp Web Developer

Voir la solution dans l'envoi d'origine

0 Votes
5 Réponses
LPM
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue
0 Votes
MFrankJohnson
Solution
Leader d'opinion

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

Here's another resource (from the guys at BluLeadz in 2018) that may still have value for you.

- see Lazy Loading Images on HubSpot

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Votes
jennysowyrda
Gestionnaire de communauté
Gestionnaire de communauté

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

Hi @Mattg1 ,

 

Do you have links to the page you can share? Can you also share the code you are working with and what you have edited?

 

The more information, screenshots and details you can provide, the better the Community can assist.

 

Thank you,
Jenny

0 Votes
benfoster
Membre

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

Same problem here. The issue that OP is describing is explained further here:

https://css-tricks.com/lozad-js-performant-lazy-loading-images/#article-header-id-3

 

From that article: "Also note we've removed the 'src' attribute of the image and replaced it with 'data-src'. This prevents the image from being loaded before the JavaScript executes and determines it should be."

 

Because all images are embedded using a "src" attribute, it's currently not possible (as far as I know) to implement lazy loading on Hubspot, because in order to do so, you have to execute Javascript before the images are loaded.

 

To fix this issue, there would need to be an advanced setting on images to use "data-src" instead of "src". Please implement this so that your users can lazy load images.

 

@jennysowyrda Please let me know if you have any questions.

stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Trying to Use data-src attribute on Hubspot CDN imgs for lazyloading

Résolue

@benfoster it's possible, but you have to use your own custom modules instead of using the default HubSpot modules in order to control the image markup.

Stefen Phelps, Community Champion, Kelp Web Developer
0 Votes