https://github.com/argyleink/app-img
<app-image> a lazy image loading custom element for considerate user experiences
https://github.com/argyleink/app-img
Last synced: about 1 year ago
JSON representation
<app-image> a lazy image loading custom element for considerate user experiences
- Host: GitHub
- URL: https://github.com/argyleink/app-img
- Owner: argyleink
- License: mit
- Created: 2018-02-14T06:15:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-15T17:37:13.000Z (over 8 years ago)
- Last Synced: 2025-04-02T13:30:38.908Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 6.84 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#### Features
- Waits to start loading until the image is in view
- Neat custom properties api for modifying presentation layer
- Fade in animation
- No dependencies
- Ready for avatars to galleries
**note**: this custom element doesn't provide any polyfills
#### Get Started
- `npm i app-img`
- load the web component in your HTML, perhaps via JS like this `import 'app-img.element'`
## Intended Usage / API
```html
```
```js
$('app-img').addEventListener('loaded', ({target}) =>
console.log(target))
```
#### Changing Presentation
Change the custom property values on the `` node.
```css
--loading-bg: any|css|color|type;
/* default: hsl(0,0%,85%) */
--loading-text_color: hex|hsl|rgb|etc;
/* default: hsl(0,0%,70%) */
--fit: fill|contain|cover|none|scale-down;
/* default: cover */
--position: left|top|50%|20px|etc;
/* default: initial */
--fade-speed: s|ms;
/* default: 0.5s */
```
#### Changing Behavior
```html
```