Lazy load extra network images
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<div class='card' {preview_html} onclick={card_clicked}>
|
<div class='card' onclick={card_clicked}>
|
||||||
|
{preview_html}
|
||||||
{metadata_button}
|
{metadata_button}
|
||||||
|
|
||||||
<div class='actions'>
|
<div class='actions'>
|
||||||
<div class='additional'>
|
<div class='additional'>
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
@@ -131,7 +131,7 @@ class ExtraNetworksPage:
|
|||||||
metadata_button = f"<div class='metadata-button' title='Show metadata' onclick={metadata_onclick}></div>"
|
metadata_button = f"<div class='metadata-button' title='Show metadata' onclick={metadata_onclick}></div>"
|
||||||
|
|
||||||
args = {
|
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),
|
"prompt": item.get("prompt", None),
|
||||||
"tabname": json.dumps(tabname),
|
"tabname": json.dumps(tabname),
|
||||||
"local_preview": json.dumps(item["local_preview"]),
|
"local_preview": json.dumps(item["local_preview"]),
|
||||||
|
|||||||
@@ -1026,6 +1026,13 @@ footer {
|
|||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.extra-network-cards .card .preview{
|
||||||
|
position: absolute;
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
[id*='_prompt_container'] > div {
|
[id*='_prompt_container'] > div {
|
||||||
margin: 0!important;
|
margin: 0!important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user