Lazy load seems to have quit loading

[lesliekirk]

I've been trying to get a lazy load to work on the SFNT in two areas of content but it seems to have a conflict between the two of them. I removed one of them and kept the other. I made no changes to the code for the second one. It had been working perfectly until today. Now nothing displays. The code is there but looks like something related to class t-defer-object and the data-defer.

Could changes that have been made to Cloudflare have affected this?

[Matt Zimmermann]

Hi Leslie,

If nothing was edited on the site, then your Cloudflare idea could be possible. You could try putting Cloudflare into developer mode, clear the cache there, and reload the site to see if the issue is gone.

[lesliekirk]

Hi Leslie,

If nothing was edited on the site, then your Cloudflare idea could be possible. You could try putting Cloudflare into developer mode, clear the cache there, and reload the site to see if the issue is gone.

It's looking like that was what it is.

[lesliekirk]

Now I'm being told that

The code of that section is set to load late/defer object load. Can you set it so it loads normally, so it does not conflict with Cloudflare's optimization?

This is what "they" want to be changed:

<section class="o-layout t-featured-categories t-defer-object" data-defer>
<h4 class="o-layout__item u-width-12 c-heading-charlie u-text-bold u-text-center x-product-list__heading t-featured-categories__heading">Helpful Categories</h4>
<mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationite m:link_dest, 'top_category_image', l.settings:navigationitem:top_category_image)" />
<div class="o-layout__item u-width-6 u-width-3--m u-text-center x-product-list__item">
<a class="u-block u-color-black x-product-list__link" href="&mvte:navigationitem:url;" target="&mvte:navigationitem:link_targ;">
<figure class="x-product-list__figure">
<picture>
<img class="x-product-list__image" data-src="&mvte:navigationitem:top_category_image;" src="" alt="&mvte:navigationitem:name;">
</picture>
<figcaption class="x-product-list__figure-caption">
<span class="x-product-list__name">&mvte:navigationitem:name;</span>
</figcaption>
</figure>
</a>
</div>
</mvt:foreach>
</section>

I think the 3 things I highlight are what I need to remove/change. Anything else?

[Matt Zimmermann]

Hi Leslie,

That should be it. If you remove t-defer-object and data-defer and change data-src to src, it should load as normal.