https://github.com/ifvictr/g6-plugin-lazyload-images
🦥 Image lazy-loading plugin for AntV’s G6 engine
https://github.com/ifvictr/g6-plugin-lazyload-images
antv g6 g6-plugin lazy-loading
Last synced: about 1 month ago
JSON representation
🦥 Image lazy-loading plugin for AntV’s G6 engine
- Host: GitHub
- URL: https://github.com/ifvictr/g6-plugin-lazyload-images
- Owner: ifvictr
- License: mit
- Created: 2021-03-22T08:38:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-03T22:44:09.000Z (over 4 years ago)
- Last Synced: 2025-08-16T16:47:18.191Z (about 2 months ago)
- Topics: antv, g6, g6-plugin, lazy-loading
- Language: TypeScript
- Homepage: https://npm.im/g6-plugin-lazyload-images
- Size: 26.4 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# g6-plugin-lazyload-images
Image lazy-loading plugin for AntV’s [G6](https://github.com/antvis/G6) engine.
Here’s a side-by-side comparison of what a graph might look like, before and after the plugin is added. The network connection is throttled down to fast 3G to highlight the difference:
Before
After
## Installation
```bash
npm install g6-plugin-lazyload-images
```
## Usage
Start off by instantiating the plugin and adding it to the graph:
```js
import G6 from '@antv/g6'
import LazyLoadImages from 'g6-plugin-lazyload-images'
const lazyLoadImages = new LazyLoadImages({
// You can use an external image here, but a data URI is preferable.
placeholder: 'data:image/svg+xml;base64,…'
})
const graph = new G6.Graph({
// Other configurations here…
plugins: [lazyLoadImages]
})
```
To start lazy loading images, you’ll need to make some slight modifications to the image node model when you add it to the graph:
```js
// Before
graph.addItem('node', {
type: 'image',
img: 'https://example.com/myimage.png'
})
// After
graph.addItem('node', {
type: 'image',
img: null,
imgLazy: 'https://example.com/myimage.png'
})
```
It’s imperative that you set the `img` key to `null`. Otherwise, G6 will use its own fallback image before the placeholder is injected and you’ll see a flash of that image.
## License
[MIT License](LICENSE.txt)