ember-img-loading
v2.0.0
Published
The default blueprint for ember-cli addons.
Downloads
11
Readme
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/[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.
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.