Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fb96bda
Add image prefetching for lightbox images
Takshil-Kunadia Apr 25, 2024
32de3cc
feat: add delay before prefetching
Takshil-Kunadia Jun 17, 2025
1076bd9
docs: update docs
Takshil-Kunadia Jun 17, 2025
4363f5f
fix: track prefetched images to avoid duplicate markup
Takshil-Kunadia Jun 21, 2025
a0ce109
docs: add context comments
Takshil-Kunadia Jun 21, 2025
713eada
feat: implement responsive image preloading for lightbox images
Takshil-Kunadia Jun 22, 2025
d9a2e9f
refactor: rectify approach to accurate name
Takshil-Kunadia Jun 22, 2025
95033e3
fix: remove URL validation
Takshil-Kunadia Jun 24, 2025
b55f573
refactor: relocate srcset assignment for better readability
Takshil-Kunadia Jun 24, 2025
1101ecb
docs: add context comment
Takshil-Kunadia Jun 24, 2025
e9214c2
refactor: address PR feedback — use Map for preload timers, add prelo…
Takshil-Kunadia Jun 24, 2025
d6473eb
refactor: early return for already fetched images
Takshil-Kunadia Jun 24, 2025
702e856
refactor: streamline state logic
Takshil-Kunadia Jun 24, 2025
9fe6406
Revert "refactor: streamline state logic"
Takshil-Kunadia Jun 25, 2025
6858b5e
fix: use dynamic lightboxSizes for imagesizes
Takshil-Kunadia Jun 25, 2025
e41fd23
refactor: use separate fns to extract common logic
Takshil-Kunadia Jun 25, 2025
e007c45
refactor: destructure image metadata parameter
Takshil-Kunadia Jun 26, 2025
a99e61e
refactor: remove redundant lightbox sizes logic
Takshil-Kunadia Nov 3, 2025
1a33ec9
fix: reload tests
Takshil-Kunadia Nov 3, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: rectify approach to accurate name
  • Loading branch information
Takshil-Kunadia committed Oct 29, 2025
commit d9a2e9fde669677396d2881a1dd2fe129933e0cb
8 changes: 4 additions & 4 deletions packages/block-library/src/image/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -257,11 +257,11 @@ function block_core_image_render_lightbox( $block_content, $block ) {
$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );

// Set an event to prefetch the image on pointerenter and pointerdown(mobile).
// Pointerleave is used to cancel the prefetch if the user hovers away from the image
// Set an event to preload the image on pointerenter and pointerdown(mobile).
// Pointerleave is used to cancel the preload if the user hovers away from the image
// before the predefined delay.
$processor->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImageWithDelay' );
$processor->set_attribute( 'data-wp-on--pointerdown', 'actions.prefetchImage' );
$processor->set_attribute( 'data-wp-on--pointerenter', 'actions.preloadImageWithDelay' );
$processor->set_attribute( 'data-wp-on--pointerdown', 'actions.preloadImage' );
$processor->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPrefetch' );

// Sets an event callback on the `img` because the `figure` element can also
Expand Down
36 changes: 18 additions & 18 deletions packages/block-library/src/image/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ const { state, actions, callbacks } = store(
{
state: {
currentImageId: null,
prefetchTimers: {},
prefetchedImageIds: new Set(),
preloadTimers: {},
preloadedImageIds: new Set(),
get currentImage() {
return state.metadata[ state.currentImageId ];
},
Expand Down Expand Up @@ -217,15 +217,15 @@ const { state, actions, callbacks } = store(
}
}
},
prefetchImage() {
preloadImage() {
const { imageId } = getContext();
const imageMetadata = state.metadata[ imageId ];
const uploadedSrc = imageMetadata.uploadedSrc;

// Bails if the image is not valid or if it has already been prefetched.
// Bails if the image is not valid or if it has already been preloaded.
if (
! isValidLink( uploadedSrc ) ||
state.prefetchedImageIds.has( imageId )
state.preloadedImageIds.has( imageId )
) {
return;
}
Expand All @@ -238,37 +238,37 @@ const { state, actions, callbacks } = store(
imageLink.as = 'image';
imageLink.href = uploadedSrc;

// Apply srcset if available for better responsive prefetching
// Apply srcset if available for better responsive preloading
if ( srcset ) {
imageLink.setAttribute( 'imagesrcset', srcset );
imageLink.setAttribute( 'imagesizes', '100vw' );
}

document.head.appendChild( imageLink );
state.prefetchedImageIds.add( imageId );
state.preloadedImageIds.add( imageId );
},
prefetchImageWithDelay() {
preloadImageWithDelay() {
const { imageId } = getContext();

// Cancels any previous prefetch timer for the same image.
if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
clearTimeout( state.prefetchTimers[ imageId ] );
// Cancels any previous preload timer for the same image.
if ( state.preloadTimers && state.preloadTimers[ imageId ] ) {
clearTimeout( state.preloadTimers[ imageId ] );
}

// Set a new timer to prefetch the image after a short delay.
state.prefetchTimers[ imageId ] = setTimeout(
// Set a new timer to preload the image after a short delay.
state.preloadTimers[ imageId ] = setTimeout(
withScope( () => {
actions.prefetchImage();
delete state.prefetchTimers[ imageId ];
actions.preloadImage();
delete state.preloadTimers[ imageId ];
} ),
200
);
},
cancelPrefetch() {
const { imageId } = getContext();
if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
clearTimeout( state.prefetchTimers[ imageId ] );
delete state.prefetchTimers[ imageId ];
if ( state.preloadTimers && state.preloadTimers[ imageId ] ) {
clearTimeout( state.preloadTimers[ imageId ] );
delete state.preloadTimers[ imageId ];
}
},
},
Expand Down