Load image queue
Loading image with queue support to allow loading images as you need. Ideal for virtual list (with cancel support). Uses load-queue.
You can use the global queue or create your own.
Install
npm install load-image-queue --save
Browser
Library is exported via UMD
. From LoadImageQueue
object you can access to default (global object) queue or create new one
Import / Require
Default (Queue)
globalQueue
createImageQueue
var queue =
Usage
You can use the global queue (uses cached queue of 1 concurrent job) or create your own custom queue via createImageQueue
.
createImageQueue(jobs = 1, cached = true)
accepts number of concurrent jobs (default 1) as first parameters, second parameter defines, if you want
to use cached queue.
To add a new url to load queue, just call add(url, success, error)
. The add method will return the QueueEntry
that holds
given url.
var entry = queueconsole // Or cancel the requestentry
More about how to cancel and work with queue, check the load-queue
package
React usage
This package is ideal to use with react component (or any virtual dom). It is important to call cancel when component has been updated (or moved)
const images = Component static propTypes = url: PropTypesstringisRequired static defaultProps = {} { superprops context /** * The queue entry * @type */ thisqueueEntry = null thismounted = false thisstate = loading: true error: null } /** * Load the image */ { const loading error = thisstate if loading === false || error !== null return // Get the thumbnail const url = thisprops // Load the image thisqueueEntry = images } /** * Cancels current load */ { if thisqueueEntry !== null thisqueueEntry thisqueueEntry = null } // Load the image when the component has been mounted or updated { thismounted = true this } { this } /** * Cancel upload when component is being destroyed */ { thismounted = false this } /** * Handle new props url and load new image * @param nextProps */ { if nextPropsurl !== thispropsurl // Cancel the previously loaded image this // Update the state to loading this } { const loading error = thisstate const url = thisprops // Pass src only if loaded let src = null if loading === false && error === null src = `url()` return <img src=src /> }
Copyright and License
load-image-queue was written by Martin Kluska and is released under the MIT License.
Copyright (c) 2017 Martin Kluska