Ember-img-loading NPM

ember-img-loading

This is an element modifier for images. If the browser supports natively, it adds loading attribute to img tag, if the browser doesn't support, it fallbacks and loads to lazysizes library and adds some data- attributes.

Compatibility

Ember.js v3.28 or above
Embroider or ember-auto-import v2

Installation

ember install ember-img-loading

Usage

Simply add modifier to img tag like;

<img
  {{loading
    type='lazy'
    src='/images/slide.png'
    srcset='/assets/images/slides/slide.png 1x, /assets/images/slides/slide@2x.png 2x'
    sizes='auto'
  }}
/>

type parameter can be: "auto", "lazy" or "eager". If not present auto is the browser default.
You can use src and srcset parameters together but you should set at least one.
sizes parameter can be only "auto" and it works only lazysizes library which means your browser doesn't support native lazy loading.
If you want to reach the browser lazy loading support this modifier adds img_loading parameter to window object.
So you can reach with window.img_loading. Either "native" or "lazysizes" will return.