Merge remote-tracking branch 'missionfloyd/extra-network-preview-lazyload' into dev

3 files changed, 11 insertions, 4 deletions

diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 6853b14f..2b32e712 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,6 +1,6 @@
 <div class='card' style={style} onclick={card_clicked}>
+	{background_image}
 	{metadata_button}
-
 	<div class='actions'>
 		<div class='additional'>
 			<ul>
@@ -12,4 +12,3 @@
 		<span class='description'>{description}</span>
 	</div>
 </div>
-
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 8bd0722e..80cfa841 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -161,7 +161,7 @@ class ExtraNetworksPage:
 

         height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''

         width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''

-        background_image = f"background-image: url(\"{html.escape(preview)}\");" if preview else ''

+        background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''

         metadata_button = ""

         metadata = item.get("metadata")

         if metadata:

@@ -186,7 +186,8 @@ class ExtraNetworksPage:
             return ""

 

         args = {

-            "style": f"'display: none; {height}{width}{background_image}'",

+            "background_image": background_image,

+            "style": f"'display: none; {height}{width}'",

             "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 5327e605..ba12723a 100644
--- a/style.css
+++ b/style.css
@@ -901,3 +901,10 @@ footer {
 .extra-network-cards .card ul a:hover{

     color: red;

 }

+

+.extra-network-cards .card .preview{

+    position: absolute;

+    object-fit: cover;

+    width: 100%;

+    height:100%;

+}