From 1d096ed1456c9b9b662477839853621848705e68 Mon Sep 17 00:00:00 2001
From: missionfloyd <missionfloyd@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:07:24 -0600
Subject: [PATCH] Lazy load extra network images

---
 html/extra-networks-card.html | 6 +++---
 modules/ui_extra_networks.py  | 2 +-
 style.css                     | 7 +++++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 1bf3fc30..8348135b 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,6 +1,6 @@
-<div class='card' {preview_html} onclick={card_clicked}>
-	{metadata_button}
-
+<div class='card' onclick={card_clicked}>
+    {preview_html}
+    {metadata_button}
 	<div class='actions'>
 		<div class='additional'>
 			<ul>
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index cdfd6f2a..1963f6a6 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -131,7 +131,7 @@ class ExtraNetworksPage:
             metadata_button = f"<div class='metadata-button' title='Show metadata' onclick={metadata_onclick}></div>"
 
         args = {
-            "preview_html": "style='background-image: url(\"" + html.escape(preview) + "\")'" if preview else '',
+            "preview_html": f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else '',
             "prompt": item.get("prompt", None),
             "tabname": json.dumps(tabname),
             "local_preview": json.dumps(item["local_preview"]),
diff --git a/style.css b/style.css
index 3eac2b17..710e9a75 100644
--- a/style.css
+++ b/style.css
@@ -1026,6 +1026,13 @@ footer {
     color: red;
 }
 
+.extra-network-cards .card .preview{
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height:100%;
+}
+
 [id*='_prompt_container'] > div {
 	margin: 0!important;
 }