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.

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

ember install ember-img-loading

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/[email protected] 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.

See the Contributing guide for details.

This project is licensed under the MIT License.