Jetpack: Search: Lazy load images

[jsnmoon]

Lazy load images by deferring load until overlay has been summoned.

[jsnmoon]

@sgomes: I have a working implementation of this change in #19269 using IntersectionObservers. However, I just noticed there's a polyfill enabling lazy loading via loading="lazy" on img elements.

The polyfill weighs in at 1.2kB gzipped. What are your thoughts on using the polyfill instead of a manual implementation?

[sgomes]

This is a great feature, well done @jsnmoon! 👍

In general, my advice is to use polyfills instead of custom implementations when the native functionality suits the situation well. Would loading="lazy" fit your use-case just as well as the custom implementation? If so, then I'd suggest going with the polyfill, while making sure it ends up in the lazily-loaded main payload chunk, if possible.

The rationale there is that polyfills can be dropped over time, as more browsers implement the feature, whereas custom code will live forever. But of course, not every situation fits the native functionality perfectly.

[jsnmoon]

It looks like the polyfill won't play along nicely with view libraries such as React/Preact, so we'll punt it for now. Thanks for your perspective on polyfills -- the bit about "custom code [...] liv[ing] forever" resonates with me quite a bit.