Add image prefetching for lightbox images

Author: Takshil-Kunadia

packages/block-library/src/image/index.php

@@ -190,6 +190,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
 	$p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
 	$p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+	// Set an event to prefetch the image on pointerenter and pointerdown(mobile).
+	$p->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImage' );
+	$p->set_attribute( 'data-wp-on--pointerdown', 'actions.prefetchImage' ); 
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.

packages/block-library/src/image/view.js

@@ -33,6 +33,27 @@ let imageRef;
  */
 let buttonRef;
 
+/**
+ * Checks if the given url is a valid.
+ *
+ * @param {string} url The url to check.
+ */
+const isValidLink = ( url ) => {
+	try {
+		const imageUrl = new URL( url );
+		if (
+			imageUrl.origin !== window.location.origin &&
+			! imageUrl.pathname.startsWith( '/wp-admin' ) &&
+			! imageUrl.pathname.startsWith( '/wp-login.php' )
+		) {
+			return false;
+		}
+		return true;
+	} catch {
+		return false;
+	}
+};
+
 const { state, actions, callbacks } = store(
 	'core/image',
 	{
@@ -171,6 +192,21 @@ const { state, actions, callbacks } = store(
 					}
 				}
 			},
+			prefetchImage() {
+				const ctx = getContext();
+				if ( ! isValidLink( ctx.uploadedSrc ) ) {
+					return;
+				}
+
+				// Creates a link element to prefetch the image.
+				const imageLink = document.createElement( 'link' );
+				imageLink.rel = 'prefetch';
+				imageLink.as = 'image';
+				imageLink.href = ctx.uploadedSrc;
+
+				// Appends the link element to the head of the document to start the prefetch.
+				document.head.appendChild( imageLink );
+			},
 		},
 		callbacks: {
 			setOverlayStyles() {