Lazy load all images (#5528)

* changes * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 13, 2023 · dc86e4a · dc86e4a
1 parent c5fe8eb
commit dc86e4a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/.changeset/fruity-ducks-stay.md b/.changeset/fruity-ducks-stay.md
@@ -0,0 +1,7 @@
+---
+"@gradio/gallery": minor
+"@gradio/image": minor
+"gradio": minor
+---
+
+feat:Lazy load all images
diff --git a/js/gallery/static/Gallery.svelte b/js/gallery/static/Gallery.svelte
@@ -207,6 +207,7 @@
 				style="height: calc(100% - {_value[selected_image][1]
 					? '80px'
 					: '60px'})"
+				loading="lazy"
 			/>
 			{#if _value[selected_image][1]}
 				<div class="caption">
@@ -229,6 +230,7 @@
 							src={image[0].data}
 							title={image[1] || null}
 							alt={image[1] || null}
+							loading="lazy"
 						/>
 					</button>
 				{/each}
@@ -265,6 +267,7 @@
 					<img
 						alt={caption || ""}
 						src={typeof image === "string" ? image : image.data}
+						loading="lazy"
 					/>
 					{#if caption}
 						<div class="caption-label">

diff --git a/js/image/interactive/Image.svelte b/js/image/interactive/Image.svelte
@@ -224,6 +224,7 @@
 					class:scale-x-[-1]={source === "webcam" && mirror_webcam}
 					class:selectable
 					on:click={handle_click}
+					loading="lazy"
 				/>
 			{:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
 				{#key static_image}
@@ -234,6 +235,7 @@
 						alt=""
 						on:load={handle_image_load}
 						class:webcam={source === "webcam" && mirror_webcam}
+						loading="lazy"
 					/>
 				{/key}
 				{#if img_width > 0}
@@ -279,6 +281,7 @@
 					class:webcam={source === "webcam" && mirror_webcam}
 					class:selectable
 					on:click={handle_click}
+					loading="lazy"
 				/>
 			{/if}
 		</Upload>
@@ -341,6 +344,7 @@
 			class:selectable
 			class:webcam={source === "webcam" && mirror_webcam}
 			on:click={handle_click}
+			loading="lazy"
 		/>
 	{:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
 		{#key static_image}
@@ -351,6 +355,7 @@
 				alt=""
 				on:load={handle_image_load}
 				class:webcam={source === "webcam" && mirror_webcam}
+				loading="lazy"
 			/>
 		{/key}
 		{#if img_width > 0}
@@ -393,6 +398,7 @@
 			class:webcam={source === "webcam" && mirror_webcam}
 			class:selectable
 			on:click={handle_click}
+			loading="lazy"
 		/>
 	{/if}
 </div>

diff --git a/js/image/static/ImagePreview.svelte b/js/image/static/ImagePreview.svelte
@@ -61,7 +61,13 @@
 	<!-- TODO: fix -->
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-	<img src={value} alt="" class:selectable on:click={handle_click} />
+	<img
+		src={value}
+		alt=""
+		class:selectable
+		on:click={handle_click}
+		loading="lazy"
+	/>
 {/if}
 
 <style>