Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/topaxi/ember-img-lazy
Lazyloaded images with Ember
https://github.com/topaxi/ember-img-lazy
ember ember-addon emberjs img img-lazyload-lib lazy lazy-loading
Last synced: 23 days ago
JSON representation
Lazyloaded images with Ember
- Host: GitHub
- URL: https://github.com/topaxi/ember-img-lazy
- Owner: topaxi
- License: mit
- Created: 2017-09-17T15:31:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:13:13.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T08:43:20.464Z (about 1 month ago)
- Topics: ember, ember-addon, emberjs, img, img-lazyload-lib, lazy, lazy-loading
- Language: Handlebars
- Size: 691 KB
- Stars: 11
- Watchers: 3
- Forks: 5
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-img-lazy
Lazily load images once they enter your viewport.
Uses `IntersectionObserver`, does not provide a polyfill and loads
images immediately if `IntersectionObserver` is not available.
## Usage
```handlebars
{{img-lazy src="smile.png" width=200 height=200 alt="Smile"}}
```
`{{img-lazy}}` will add the class `img-lazy--loading` once it starts
fetching the image source and applies the class `img-lazy--loaded` and `src`
property when it finishes.
## Configuration
`config/environment`:
```javascript
module.exports = function(environment) {
let ENV = {
// ...
'ember-img-lazy': {
// Don't load images in fastboot, this effectively
// shows the placeholder image until ember takes over.
// Default: false
lazyFastBoot: true,
// The default setting is useful if one wants to show a
// placeholder loading img (i.e. through a background-image).
// Disable to not wait for the images to load to set the src url.
// This is mostly useful with progressive encoded images.
// Default: false
setSrcImmediately: false,
// Config passed to IntersectionObserver.
observerConfig: {
rootMargin: '50px 0px',
threshold: 0.01
}
}
}
// ...
}
```
## FadeIn Example
```css
@keyframes fade-in {
to {
opacity: 1;
}
}
.img-lazy {
opacity: 0;
}
.img-lazy--loaded {
animation: 200ms fade-in forwards;
background: none;
}
```
Or with placeholder style, flickers if `immediately` is set (default `false`).
```css
@keyframes fade-in {
to {
opacity: 1;
}
}
.img-lazy {
opacity: 0;
}
.img-lazy--loading {
opacity: 1;
background: rgba(238, 238, 236, 0.8);
}
.img-lazy--loaded {
animation: 200ms fade-in forwards;
}
```
## Installation
* `ember install ember-img-lazy`
## Running
* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).
## Running Tests
* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`
## Building
* `ember build`
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).