Lazy Load in Repeater

I’ve just changed a page to use the Lazy Load feature on a page I’m working on. This seemed to be working well and the pages are loading more quickly. I haven’t finished the srcset options but this is also working well (and in this case will be more important than the lazy loading).

I’ve just realisd that this feature doesn’t seem to work if you switch to another page - eg if you’re using a paged query. It’s necessary to refresh the page for the images to update.

I recently discovered a useful feature on cPanel - you can create a temporary domain for a site you’re working on. I’ve created one and here is a page from the site showing an
example of the problem. If you use the paging control to move to page 2, the text updates, but not the images - you have to refresh the page.

I don’t know if this is a bug or a limitation of lazy loading. The main problem from my point of view is that I shall want to use the srcset feature in a number of cases throughout the site, but it seems it can only be used with lazy loading. Is there a reason why the two have to be linked?

(Initially I thought the problem might be due to the fact that the different sized images are created on the fly the first time they’re viewed and then cached - so they may not exist when first referenced. However I don’t think this is relevant but mention it in case it could be.)

Hello Tom,
In order for the src to be reloaded on page change you need to use a Repeat Children region and use the identity column as a key:

Screenshot_1

If this field is empty the dynamic src won’t be reloaded.

Thanks Teodor. I’m very pleased to hear it was me and not a limitation of the feature.

I’ve never been too clear about the difference between Repeat and Repeat Children - I usually just use Repeat and use code view to add what I want to happen in the repeat.

The repeat region is just repeating what is it applied to.
Repeat children repeats the children of any kind of parent>child structure, be it an ul>li, or any div>div structure.
The Repeat Children region offers more options (such as KEY) which is useful when you need animations or when you need to target/call specific element in the repeat, as well as in cases like yours with the lazy load component and refresh of the image source.

2 Likes