https://github.com/1000ch/lazyload-image

HTMLImageElement extension for lazy loading.
https://github.com/1000ch/lazyload-image

image lazyload web-components

Last synced: 7 days ago
JSON representation

HTMLImageElement extension for lazy loading.

• Host: GitHub
• URL: https://github.com/1000ch/lazyload-image
• Owner: 1000ch
• Created: 2014-08-28T04:55:40.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T13:27:23.000Z (about 2 years ago)
• Last Synced: 2025-01-17T06:05:52.415Z (14 days ago)
• Topics: image, lazyload, web-components
• Language: HTML
• Homepage: https://1000ch.github.io/lazyload-image/
• Size: 5.02 MB
• Stars: 208
• Watchers: 6
• Forks: 12
• Open Issues: 11
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
🚩 Finally [Native lazy-loading for the web](https://web.dev/native-lazy-loading/) was introduced. I recommend you to use [`loading` attribute](https://html.spec.whatwg.org/#lazy-loading-attributes) instead.

# lazyload-image

[HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) extension for lazy loading. Images will be loaded when they are shown.

## Install

Install `lazyload-image` via npm.

```bash

$ npm install lazyload-image

```

## Usage

Import `LazyloadImage` and register it.

```javascript

import LazyloadImage from 'https://unpkg.com/lazyload-image';

customElements.define('lazyload-image', LazyloadImage, {

  extends: 'img'

});

```

Modify your `` elements such as following.

```html



```

## Fallback

If a browser does not support `customElements.define()`, images will be loaded as usual.

## License

[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)