https://github.com/vogelino/cycle-image-loading-driver
A cycle.js driver for preloading images
https://github.com/vogelino/cycle-image-loading-driver
cyclejs drivers image-loading preloading preloading-images reactive-programming rxjs streams
Last synced: 11 months ago
JSON representation
A cycle.js driver for preloading images
- Host: GitHub
- URL: https://github.com/vogelino/cycle-image-loading-driver
- Owner: vogelino
- Created: 2020-06-18T13:40:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:18:16.000Z (about 3 years ago)
- Last Synced: 2025-02-25T09:42:46.768Z (12 months ago)
- Topics: cyclejs, drivers, image-loading, preloading, preloading-images, reactive-programming, rxjs, streams
- Language: JavaScript
- Homepage:
- Size: 940 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://npmjs.org/package/cycle-image-loading-driver 'View this project on npm')
# [Cycle.js driver](https://cycle.js.org/drivers.html) for preloading images
This driver takes in a sink stream of images to load and returns a source stream that emits whenever an image is loaded.
## Install
### NPM
```sh
npm install --save cycle-image-loading-driver
```
### Yarn
```sh
yarn add cycle-image-loading-driver
```
## Creating the driver
Like any other driver, the (default) function `makeImageLoadingDriver` should be called in the run function.
```js
run(main, {
imagesToLoad: makeImageLoadingDriver(),
})
```
The function `makeImageLoadingDriver` takes no options.
## Sink
The sink `imagesToLoad` should be a stream emiting an array of image urls.
```js
function main() {
// ...
return {
imagesToLoad: xs.of([url1, url2, url3]),
}
}
```
## Source
The source stream produced emits an object in which the keys is the image URL and the value an object with properties `loaded` and possibly `error`.
```js
function main(sources) {
sources.imagesToLoad.map((images) => {
const isImg1Loaded = images[img1Url].loaded
//...
})
//...
}
```
To loop through all images use `Object.keys`
```js
function main(sources) {
sources.imagesToLoad.map((images) => {
const allImages = Object.keys(images).map((key) => {
const imgObj = images[key]
return { ...imgObj, id: key }
})
//...
})
//...
}
```