feat(poster): add posterloading for img lazy load

README.md

@@ -1,6 +1,6 @@
 [![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) [![min+gzip](https://badgen.net/bundlephobia/minzip/@justinribeiro/lite-youtube)](https://bundlephobia.com/result?p=@justinribeiro/lite-youtube) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)
 
-![Statements](https://img.shields.io/badge/statements-97.67%25-brightgreen.svg) ![Branches](https://img.shields.io/badge/branches-86.2%25-yellow.svg) ![Functions](https://img.shields.io/badge/functions-88%25-yellow.svg) ![Lines](https://img.shields.io/badge/lines-97.67%25-brightgreen.svg)
+![Statements](https://img.shields.io/badge/statements-97.7%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-86.66%25-yellow.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-88.46%25-yellow.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-97.7%25-brightgreen.svg?style=flat)
 
 # \<lite-youtube\>
 
@@ -124,6 +124,7 @@ flexibility.
 | `videoplay`    | The title of the play button (for translation)                   | `Play`  |
 | `videoStartAt` | Set the point at which the video should start, in seconds        | `0`     |
 | `posterquality`| Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault) | `hqdefault`  |
+| `posterloading`| Set img lazy load attr `loading` for poster image | `lazy`  |
 | `nocookie`     | Use youtube-nocookie.com as iframe embed uri | `false` |
 | `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |
 | `params`       | Set YouTube query parameters                                     | ``      |

lite-youtube.ts

@@ -95,6 +95,10 @@ export class LiteYTEmbed extends HTMLElement {
     return this.getAttribute('posterquality') || 'hqdefault';
   }
 
+  get posterLoading(): string {
+    return this.getAttribute('posterloading') || 'lazy';
+  }
+
   get params(): string {
     return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
   }
@@ -292,6 +296,7 @@ export class LiteYTEmbed extends HTMLElement {
 
     const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
     const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
+    this.domRefImg.fallback.loading = this.posterLoading;
     this.domRefImg.webp.srcset = posterUrlWebp;
     this.domRefImg.jpeg.srcset = posterUrlJpeg;
     this.domRefImg.fallback.src = posterUrlJpeg;

test/lite-youtube.test.ts

@@ -97,6 +97,39 @@ describe('<lite-youtube>', () => {
     expect(fallback?.src).to.be.equal(checkStringOne);
   });
 
+  it('posterLoading attr default', async () => {
+    const el = await fixture<LiteYTEmbed>(
+      html`<lite-youtube
+        videoid="guJLfqTFfIw"
+        posterQuality="mqdefault"
+      ></lite-youtube>`
+    );
+    expect(el.posterLoading).to.be.equal('lazy');
+
+    const fallback = el.shadowRoot?.querySelector<HTMLImageElement>(
+      '#fallbackPlaceholder'
+    );
+
+    expect(fallback?.loading).to.be.equal('lazy');
+  });
+
+  it('posterLoading attr set should stick to img', async () => {
+    const el = await fixture<LiteYTEmbed>(
+      html`<lite-youtube
+        videoid="guJLfqTFfIw"
+        posterQuality="mqdefault"
+        posterloading="eager"
+      ></lite-youtube>`
+    );
+    expect(el.posterLoading).to.be.equal('eager');
+
+    const fallback = el.shadowRoot?.querySelector<HTMLImageElement>(
+      '#fallbackPlaceholder'
+    );
+
+    expect(fallback?.loading).to.be.equal('eager');
+  });
+
   it('is valid A11y via aXe', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     await expect(el).shadowDom.to.be.accessible();