Add Image Prefetching for Click to expand Images

[Takshil-Kunadia]

PR For :- Issue #60883

What?

Prefetch full-resolution image to speed up display of Click to expand images.
see #60883 for more details

Why?

Hovering over a click-to-expand image block does not proactively attempt to prefetch the full-scale image in Lighbox. This can result in a prolonged period in which the low-resolution scaled-up image is displayed in the lightbox.

How?

• Implement prefetchImage action that prefetches an image and keeps it in the browser cache.
• Then utilising the above add pointer event directives that trigger it on pointerup & pointerdown.

Testing Instructions

1. Create a post with a click to expand image on it.
2. Open Dev tools and throttle network to slow 3G and notice the network tab.
3. Hover over the image, this will trigger the image to load.
4. When the loading is complete, click the image for it to load in full resolution without any delay or loading.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Takshil-Kunadia <[email protected]>
Co-authored-by: artemiomorales <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[artemiomorales]

@Takshil-Kunadia Thanks for creating this PR! I've left a comment on the issue to loop a few other folks into the discussion who may have thoughts on how to best proceed. In short, we previously had prefetching on hover but removed it. Since then, there's been more discussion around this, so perhaps may be good to add this back.