Using Lazy Loading with HubDB?

[LaurenO]

Hi all, 

** Main Question: Can I implement lazy loading of a photo when the photos are pulling from a HubDB? **

Why/backstory: 

I've just swtiched my team directory over to pulling from a HubDB (for much easier edits), and I'm running into an issue trying to get them to lazy load. Because all of the 115 images are killing my loading time.

The coding below is coding that worked because it wasn't pulling from a HubDB

HTML: 

<div class="grid">
<div class="item">
<p><a href="https://info.blockimaging.com/mohammed-ali" rel=" noopener"><img class="lazy" data-src="https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/ali-mo-circle.jpg" alt="ali-mo-circle" style="width: 125px;" width="125"></a></p>
<p><a href="https://info.blockimaging.com/mohammed-ali">Ali, Mohammed</a></p>
</div>
<div class="item">
<p><a href="https://info.blockimaging.com/heather-anderson" rel=" noopener"><img class="lazy" data-src="https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/anderson-heather-circle-s.jpg" alt="anderson-heather-circle-s" style="width: 125px;" width="125"></a></p>
<p><a href="https://info.blockimaging.com/heather-anderson">Anderson, Heather</a></p>
</div>
<div class="item">
<p><a href="https://info.blockimaging.com/tony-baggett" rel=" noopener"><img class="lazy" data-src="https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/baggett-tony-circle-s.jpg" alt="baggett-tony-circle-s" width="125" style="width: 125px;"></a></p>
<p><a href="https://info.blockimaging.com/tony-baggett" rel=" noopener">Baggett, Tony</a></p>

(...and it continues for quite a few more times)

CSS:

Main CSS

{{ get_asset_url('/Coded files/Custom/system/css/2016_Golden_Responsive_Test_with_Menu.css') }}

Page Level CSS

<style>
.grid {
display: grid;
/* Display as a Grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* repeat = as many times as you can fit */
/* auto-fit = fit as many items on the line as possible, go bigger if you need to */
/*minmax = (min size, max size) = the minimum size the column should be is 200px, but if there's space then give them all 1fr of that width. */
grid-gap: 10px;
}

.item {

height: 100%;
text-align: center;
}

.item2 {

height: 400px;
text-align: center;}
</style>

JavaScript File that links in the template file : 

{{ get_asset_url('/blockimaging_shared/scripts/lazy_loading_images.js') }}

Now, I'm trying to get it work work with my HubDB module, but this is what I'm getting. It starts with the image showing but when you scroll it starts looking like this: 

Here's the coding relating to that: 

URL: https://www.blockimaging.com/team-007-0?hs_preview=wrCWdXsk-23543576882

JS and CSS unchanged

HTML+HUBL in Module:
<div class="grid">
{# Get Team Members from HubDB #}
{% set table = hubdb_table_rows(2028560, queryparam)%}

{% for row in table %}

<div class="item" style=" display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px;">
<a href="{{ row.url}}"> <img class="team lazy" src="{{ row.image }}" alt="{{ row.first }} {{ row.last }}"> </a>

<p>
<a href="{{ row.url }}"> {{ row.last }}, {{ row.first }} </a>
</p>

</div>

{% endfor %}

</div>

----------

I tried my best to include everything, but let me know if you need anymore information to help. 

I appreciate anyone's time and effort on this! 

Lauren

[stefen · Accepted solution]

@LaurenO most likely a javascript error. For a simpler solution, you could get rid of the javascript library, revert the image markup back to normal (replace the `data-src` back to just `src`) and add the `loading="lazy"` attribute to your images. This uses the native browser lazy loading functionality that was recently introduced in Chrome. More info here:https://addyosmani.com/blog/lazy-loading/

Example image: 

<img src="example.com" loading="lazy">

It makes lazy loading super simple and quick but the only downside is it doesn't yet work in all major browsers. 

[LaurenO]

@stefen That does seem like the easiest solution! Lighthouse liked the page more especially with the time to interactive. I hope this gets supported on all the browsers pretty soon. 

Thank you for the quick reply and the solution!