Cycle.js driver 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

npm install --save cycle-image-loading-driver

Yarn

yarn add cycle-image-loading-driver

Creating the driver

Like any other driver, the (default) function makeImageLoadingDriver should be called in the run function.

run(main, {
    imagesToLoad: makeImageLoadingDriver(),
})

The function makeImageLoadingDriver takes no options.

Sink

The sink imagesToLoad should be a stream emiting an array of image urls.

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.

function main(sources) {
    sources.imagesToLoad.map((images) => {
        const isImg1Loaded = images[img1Url].loaded
        //...
    })
    //...
}

To loop through all images use Object.keys

function main(sources) {
    sources.imagesToLoad.map((images) => {
        const allImages = Object.keys(images).map((key) => {
            const imgObj = images[key]
            return { ...imgObj, id: key }
        })
        //...
    })
    //...
}