jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow for lazy loading images in markdown (#16746)

Browse Source
This commit is contained in:
Joakim Sørensen 2023-06-05 09:46:38 +02:00 committed by GitHub
parent 71954f545c
commit 31a3fa02d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
View File

@ -44,7 +44,10 @@ class HassioAddonDocumentationDashboard extends LitElement {
: ""} : ""}
<div class="card-content"> <div class="card-content">
${this._content ${this._content
? html`<ha-markdown .content=${this._content}></ha-markdown>` ? html`<ha-markdown
.content=${this._content}
lazy-images
></ha-markdown>`
: html`<hass-loading-screen no-toolbar></hass-loading-screen>`} : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
</div> </div>
</ha-card> </ha-card>

1
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -659,6 +659,7 @@ class HassioAddonInfo extends LitElement {
<div class="card-content"> <div class="card-content">
<ha-markdown <ha-markdown
.content=${this.addon.long_description} .content=${this.addon.long_description}
lazy-images
></ha-markdown> ></ha-markdown>
</div> </div>
</ha-card> </ha-card>

6
src/components/ha-markdown-element.ts
View File

@ -11,6 +11,9 @@ class HaMarkdownElement extends ReactiveElement {
@property({ type: Boolean }) public breaks = false; @property({ type: Boolean }) public breaks = false;
@property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
false;
protected createRenderRoot() { protected createRenderRoot() {
return this; return this;
} }
@ -58,6 +61,9 @@ class HaMarkdownElement extends ReactiveElement {
// Fire a resize event when images loaded to notify content resized // Fire a resize event when images loaded to notify content resized
} else if (node instanceof HTMLImageElement) { } else if (node instanceof HTMLImageElement) {
if (this.lazyImages) {
node.loading = "lazy";
}
node.addEventListener("load", this._resize); node.addEventListener("load", this._resize);
} }
} }

4
src/components/ha-markdown.ts
View File

@ -15,6 +15,9 @@ export class HaMarkdown extends LitElement {
@property({ type: Boolean }) public breaks = false; @property({ type: Boolean }) public breaks = false;
@property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
false;
protected render() { protected render() {
if (!this.content) { if (!this.content) {
return nothing; return nothing;
@ -24,6 +27,7 @@ export class HaMarkdown extends LitElement {
.content=${this.content} .content=${this.content}
.allowSvg=${this.allowSvg} .allowSvg=${this.allowSvg}
.breaks=${this.breaks} .breaks=${this.breaks}
.lazyImages=${this.lazyImages}
></ha-markdown-element>`; ></ha-markdown-element>`;
} }