How to use fancybox and lazy load together?

Question

JavaScript

Question of such a plan
I use fancibox
https://fancyapps.com/fancybox/3/docs/#ajax
and lazy loading
jquery.eisbehr.de/lazy/#installation

So it turned out that this and that should be on the same block

<a data-fancybox data-type="ajax" data-src="products/{$product->url}?preview" class="item__img lazyload" {if $product->image} style="background-image: url();"{/if}></a>

That is, data-src is used to load Ajax , and the data-src attribute is also needed for lazy load. How can I combine them?
data-src="products/{$product->url}?preview"

Answer 1

<a data-fancybox data-type="ajax" href="products/{$product->url}?preview" class="item__img lazy" data-src="{$product->image->filename|resize:1200:1200}" {if $product->image} style="background-image: url({$product->image->filename|resize:1200:1200});"{/if}></a>

Well, after digging into fancybox, you can refuse data-src there, but lazy still gives an error
jquery.lazy.js:514 Uncaught TypeError: Cannot read property 'attr' of undefined
.attr(_srcset, element.attr(srcsetAttribute))swears at this line

// do it as single 'attr' calls, to be sure 'src' is set after 'srcset'
                var imageSrc = (_isRetinaDisplay && elementRetina ? elementRetina : element.attr(srcAttribute)) || '';
                imageObj.attr(_sizes, element.attr(sizesAttribute))
                        .attr(_srcset, element.attr(srcsetAttribute))
                        .attr(_src, imageSrc ? imageBase + imageSrc : null);