Samuel Newman
ff731849b0
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Eric Bailey <git@esb.lol>
104 lines
4.0 KiB
Diff
104 lines
4.0 KiB
Diff
diff --git a/build/Image.types.d.ts b/build/Image.types.d.ts
|
|
index 022ae487e65ae9d624f8a4be262b01944928f250..416504fe18ecd00fdc713faca23485fb292caf2c 100644
|
|
--- a/build/Image.types.d.ts
|
|
+++ b/build/Image.types.d.ts
|
|
@@ -152,6 +152,16 @@ export interface ImageProps extends Omit<ViewProps, 'style' | 'children'> {
|
|
* @default 'normal'
|
|
*/
|
|
priority?: 'low' | 'normal' | 'high' | null;
|
|
+ /**
|
|
+ * The loading behavior for the image. Maps to the native HTML `loading` attribute on web.
|
|
+ *
|
|
+ * - `'lazy'` - Defers loading until the image is near the viewport.
|
|
+ * - `'eager'` - Loads the image immediately.
|
|
+ *
|
|
+ * @default undefined
|
|
+ * @platform web
|
|
+ */
|
|
+ loading?: 'lazy' | 'eager' | null;
|
|
/**
|
|
* Determines whether to cache the image and where: on the disk, in the memory or both.
|
|
*
|
|
diff --git a/src/ExpoImage.web.tsx b/src/ExpoImage.web.tsx
|
|
index 2a49ff00649b374b86fa780653a4b0d6f13a4a57..1c3de93ef280bf6f3c27bed34c794b8ff59e3db3 100644
|
|
--- a/src/ExpoImage.web.tsx
|
|
+++ b/src/ExpoImage.web.tsx
|
|
@@ -70,6 +70,7 @@ export default function ExpoImage({
|
|
onLoadEnd,
|
|
onDisplay,
|
|
priority,
|
|
+ loading,
|
|
blurRadius,
|
|
recyclingKey,
|
|
style,
|
|
@@ -118,6 +119,7 @@ export default function ExpoImage({
|
|
accessibilityLabel={accessibilityLabel ?? alt}
|
|
cachePolicy={cachePolicy}
|
|
priority={priority}
|
|
+ loading={loading}
|
|
tintColor={tintColor}
|
|
/>
|
|
),
|
|
@@ -149,6 +151,7 @@ export default function ExpoImage({
|
|
className={className}
|
|
cachePolicy={cachePolicy}
|
|
priority={priority}
|
|
+ loading={loading}
|
|
contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}
|
|
hashPlaceholderContentPosition={contentPosition}
|
|
hashPlaceholderStyle={imageHashStyle}
|
|
diff --git a/src/Image.types.ts b/src/Image.types.ts
|
|
index 9dec0e7aee61dfaa73a3cfa535d08259c9dad209..61c162114977dff35b633ac6b1f3d59e373bbbfe 100644
|
|
--- a/src/Image.types.ts
|
|
+++ b/src/Image.types.ts
|
|
@@ -178,6 +178,17 @@ export interface ImageProps extends Omit<ViewProps, 'style' | 'children'> {
|
|
*/
|
|
priority?: 'low' | 'normal' | 'high' | null;
|
|
|
|
+ /**
|
|
+ * The loading behavior for the image. Maps to the native HTML `loading` attribute on web.
|
|
+ *
|
|
+ * - `'lazy'` - Defers loading until the image is near the viewport.
|
|
+ * - `'eager'` - Loads the image immediately.
|
|
+ *
|
|
+ * @default undefined
|
|
+ * @platform web
|
|
+ */
|
|
+ loading?: 'lazy' | 'eager' | null;
|
|
+
|
|
/**
|
|
* Determines whether to cache the image and where: on the disk, in the memory or both.
|
|
*
|
|
diff --git a/src/web/ImageWrapper.tsx b/src/web/ImageWrapper.tsx
|
|
index e8f891d525892f8d3668e34cf96cefccfbfc49f6..89a5cb1e3a8574fc3bd1d0361895a610e3165dfb 100644
|
|
--- a/src/web/ImageWrapper.tsx
|
|
+++ b/src/web/ImageWrapper.tsx
|
|
@@ -30,6 +30,7 @@ const ImageWrapper = React.forwardRef(
|
|
contentPosition,
|
|
hashPlaceholderContentPosition,
|
|
priority,
|
|
+ loading,
|
|
style,
|
|
hashPlaceholderStyle,
|
|
tintColor,
|
|
@@ -82,6 +83,7 @@ const ImageWrapper = React.forwardRef(
|
|
// @ts-ignore
|
|
// eslint-disable-next-line react/no-unknown-property
|
|
fetchPriority={getFetchPriorityFromImagePriority(priority || 'normal')}
|
|
+ loading={loading || undefined}
|
|
{...getImageWrapperEventHandler(events, sourceWithHeaders)}
|
|
{...getImgPropsFromSource(source)}
|
|
{...props}
|
|
diff --git a/src/web/ImageWrapper.types.ts b/src/web/ImageWrapper.types.ts
|
|
index 19bbe2f15999124cda0ca7c81b3ebcf289f522f8..179837f803a3d315c85075895f4191631b37eda7 100644
|
|
--- a/src/web/ImageWrapper.types.ts
|
|
+++ b/src/web/ImageWrapper.types.ts
|
|
@@ -29,6 +29,7 @@ export type ImageWrapperProps = {
|
|
contentPosition?: ImageContentPositionObject;
|
|
hashPlaceholderContentPosition?: ImageContentPositionObject;
|
|
priority?: string | null;
|
|
+ loading?: 'lazy' | 'eager' | null;
|
|
style: CSSProperties;
|
|
tintColor?: string | null;
|
|
hashPlaceholderStyle?: CSSProperties;
|