https://github.com/pionl/load-image-queue
Loading image with queue support to allow loading images as you need. Ideal for virtual list (with cancel support).
https://github.com/pionl/load-image-queue
image image-loading image-queue load-queue queue
Last synced: 2 months ago
JSON representation
Loading image with queue support to allow loading images as you need. Ideal for virtual list (with cancel support).
- Host: GitHub
- URL: https://github.com/pionl/load-image-queue
- Owner: pionl
- License: mit
- Created: 2017-07-28T08:39:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-02T16:04:44.000Z (over 8 years ago)
- Last Synced: 2024-10-30T07:45:37.191Z (about 1 year ago)
- Topics: image, image-loading, image-queue, load-queue, queue
- Language: JavaScript
- Size: 43.9 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/pionl/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
```html
// Default global queue
var queue = new LoadQueue.default
// Create custom queue
var queue3 = new LoadQueue.createImageQueue(2)
```
### Import / Require
#### Default (Queue)
```javascript
import globalQueue from 'load-image-queue'
globalQueue.add(...)
```
#### createImageQueue
```javascript
import {createImageQueue} from 'load-image-queue'
var queue = createImageQueue()
```
## 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](https://github.com/pionl/load-queue#load-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.
```javascript
var entry = queue.add('url', function(url, customVar, customVar2) {
console.log(url, customVar, customVar2)
}, function(error) {
console.log(error)
})
console.log(entry.url)
// Or cancel the request
entry.cancel()
```
More about how to cancel and work with queue, check the `load-queue` [package](https://github.com/pionl/load-queue#load-queue)
# 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)
```javascript
import {createImageQueue} from 'load-image-queue'
const images = createImageQueue(3)
export default class Image extends React.Component {
static propTypes = {
url: PropTypes.string.isRequired
}
static defaultProps = {}
constructor (props, context) {
super(props, context)
/**
* The queue entry
* @type {QueueEntry}
*/
this.queueEntry = null
this.mounted = false
this.state = {
loading: true,
error: null
}
}
/**
* Load the image
*/
loadImage () {
const {loading, error} = this.state
if (loading === false || error !== null) {
return
}
// Get the thumbnail
const {url} = this.props
// Load the image
this.queueEntry = images.load(url, (url) => {
if (this.mounted === false) {
return
}
this.setState({
loading: false,
error: null
})
}, (error) => {
this.setState({
error: error
})
})
}
/**
* Cancels current load
*/
cancelLoad () {
if (this.queueEntry !== null) {
this.queueEntry.cancel()
this.queueEntry = null
}
}
// Load the image when the component has been mounted or updated
componentWillMount () {
this.mounted = true
this.loadImage()
}
componentDidUpdate () {
this.loadImage()
}
/**
* Cancel upload when component is being destroyed
*/
componentWillUnmount () {
this.mounted = false
this.cancelLoad()
}
/**
* Handle new props url and load new image
* @param nextProps
*/
componentWillReceiveProps (nextProps) {
if (nextProps.url !== this.props.url) {
// Cancel the previously loaded image
this.cancelLoad()
// Update the state to loading
this.setState({
loading: true,
error: null
})
}
}
render () {
const {loading, error} = this.state
const {url} = this.props
// Pass src only if loaded
let src = null
if (loading === false && error === null) {
src = `url(${url})`
}
return 
}
}
```
## Copyright and License
[load-image-queue](https://github.com/pionl/load-image-queue)
was written by [Martin Kluska](http://kluska.cz) and is released under the
[MIT License](LICENSE.md).
Copyright (c) 2017 Martin Kluska