- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
How to defer offscreen images in hubspot?
SOLVENov 4, 2019 1:32 AM
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
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Feb 16, 2020 8:46 PM
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
![]() | We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020! Sign up today! |
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Feb 18, 2020 2:24 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content