Enable native lazy loading by default

Closes #89
simonihmig · Feb 5, 2021 · 89aa535 · 89aa535
1 parent e0b1b02
commit 89aa535
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/addon/components/responsive-image.hbs b/addon/components/responsive-image.hbs
@@ -8,6 +8,7 @@
   {{/each}}
   <img
     src={{this.src}}
+    loading="lazy"
     ...attributes
   />
 </picture>
diff --git a/tests/integration/components/responsive-image-test.js b/tests/integration/components/responsive-image-test.js
@@ -166,6 +166,18 @@ module('Integration: Responsive Image Component', function (hooks) {
     );
   });
 
+  test('it loads lazily by default', async function (assert) {
+    await render(hbs`<ResponsiveImage @image="assets/images/test.png" />`);
+    assert.dom('img').hasAttribute('loading', 'lazy');
+  });
+
+  test('it can optionally load eager', async function (assert) {
+    await render(
+      hbs`<ResponsiveImage @image="assets/images/test.png" loading="eager" />`
+    );
+    assert.dom('img').hasAttribute('loading', 'eager');
+  });
+
   test('it renders arbitrary HTML attributes', async function (assert) {
     await render(
       hbs`<ResponsiveImage @image="assets/images/test.png" class="foo" role="button" data-test-image />`