Allow for lazy loading images in markdown (#16746)

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -44,7 +44,10 @@ class HassioAddonDocumentationDashboard extends LitElement {
             : ""}
           <div class="card-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>`}
           </div>
         </ha-card>

hassio/src/addon-view/info/hassio-addon-info.ts

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

src/components/ha-markdown-element.ts

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

src/components/ha-markdown.ts

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