{"id":16458494,"url":"https://github.com/pionl/load-image-queue","last_synced_at":"2025-10-27T09:31:08.312Z","repository":{"id":57144730,"uuid":"98628684","full_name":"pionl/load-image-queue","owner":"pionl","description":"Loading image with queue support to allow loading images as you need. Ideal for virtual list (with cancel support).","archived":false,"fork":false,"pushed_at":"2017-08-02T16:04:44.000Z","size":45,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T07:45:37.191Z","etag":null,"topics":["image","image-loading","image-queue","load-queue","queue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pionl.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-28T08:39:48.000Z","updated_at":"2018-11-13T06:01:26.000Z","dependencies_parsed_at":"2022-09-05T12:31:41.297Z","dependency_job_id":null,"html_url":"https://github.com/pionl/load-image-queue","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionl%2Fload-image-queue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionl%2Fload-image-queue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionl%2Fload-image-queue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionl%2Fload-image-queue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pionl","download_url":"https://codeload.github.com/pionl/load-image-queue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238471997,"owners_count":19478141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","image-loading","image-queue","load-queue","queue"],"created_at":"2024-10-11T10:45:27.197Z","updated_at":"2025-10-27T09:31:07.951Z","avatar_url":"https://github.com/pionl.png","language":"JavaScript","readme":"# Load image queue \nLoading image with queue support to allow loading images as you need. Ideal for virtual list (with cancel support).\nUses [load-queue](https://github.com/pionl/load-queue).\n\nYou can use the global queue or create your own.\n\n## Install\n\n```\nnpm install load-image-queue --save\n```\n\n### Browser\n\nLibrary is exported via `UMD`. From `LoadImageQueue` object you can access to default (global object) queue or create new one\n\n```html\n\u003cscript src=\"./dist/load-image-queue.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n// Default global queue\nvar queue = new LoadQueue.default\n// Create custom queue\nvar queue3 = new LoadQueue.createImageQueue(2)\n\u003c/script\u003e\n```\n\n### Import / Require\n\n#### Default (Queue)\n```javascript\nimport globalQueue from 'load-image-queue'\n\nglobalQueue.add(...)\n```\n#### createImageQueue\n```javascript\nimport {createImageQueue} from 'load-image-queue'\n\nvar queue = createImageQueue()\n```\n\n## Usage\n\nYou can use the global queue (uses cached queue of 1 concurrent job) or create your own custom queue via `createImageQueue`.\n\n`createImageQueue(jobs = 1, cached = true)` accepts number of concurrent jobs (default 1) as first parameters, second parameter defines, if you want\nto use [cached queue](https://github.com/pionl/load-queue#load-queue).\n\nTo add a new url to load queue, just call `add(url, success, error)`. The add method will return the `QueueEntry` that holds\ngiven url.\n\n```javascript\nvar entry = queue.add('url', function(url, customVar, customVar2) {\n    console.log(url, customVar, customVar2)\n}, function(error) {\n  console.log(error)\n})\nconsole.log(entry.url)\n\n// Or cancel the request\nentry.cancel()\n```\n\nMore about how to cancel and work with queue, check the `load-queue` [package](https://github.com/pionl/load-queue#load-queue)\n\n# React usage\nThis package is ideal to use with react component (or any virtual dom). It is important to call cancel when component\nhas been updated (or moved)\n\n```javascript\nimport {createImageQueue} from 'load-image-queue'\n\nconst images = createImageQueue(3)\n\nexport default class Image extends React.Component {\n    static propTypes = {\n        url: PropTypes.string.isRequired\n    }\n    static defaultProps = {}\n\n    constructor (props, context) {\n        super(props, context)\n\n        /**\n         * The queue entry\n         * @type {QueueEntry}\n         */\n        this.queueEntry = null\n        this.mounted = false\n        this.state = {\n            loading: true,\n            error: null\n        }\n    }\n\n    /**\n     * Load the image\n     */\n    loadImage () {\n        const {loading, error} = this.state\n        if (loading === false || error !== null) {\n            return\n        }\n\n        // Get the thumbnail\n        const {url} = this.props\n\n        // Load the image\n        this.queueEntry = images.load(url, (url) =\u003e {\n            if (this.mounted === false) {\n                return\n            } \n            \n            this.setState({\n                loading: false,\n                error: null\n            })\n        }, (error) =\u003e {\n            this.setState({\n                error: error\n            })\n        })\n    }\n\n    /**\n     * Cancels current load\n     */\n    cancelLoad () {\n        if (this.queueEntry !== null) {\n            this.queueEntry.cancel()\n            this.queueEntry = null\n        }\n    }\n\n    // Load the image when the component has been mounted or updated\n    componentWillMount () {\n        this.mounted = true\n        this.loadImage()\n    }\n\n    componentDidUpdate () {\n        this.loadImage()\n    }\n\n    /**\n     * Cancel upload when component is being destroyed\n     */\n    componentWillUnmount () {\n        this.mounted = false\n        this.cancelLoad()\n    }\n\n    /**\n     * Handle new props url and load new image\n     * @param nextProps\n     */\n    componentWillReceiveProps (nextProps) {\n        if (nextProps.url !== this.props.url) {\n            // Cancel the previously loaded image\n            this.cancelLoad()\n\n            // Update the state to loading\n            this.setState({\n                loading: true,\n                error: null\n            })\n        }\n    }\n\n    render () {\n        const {loading, error} = this.state\n        const {url} = this.props\n\n        // Pass src only if loaded\n        let src = null\n        if (loading === false \u0026\u0026 error === null) {\n            src = `url(${url})`\n        }\n\n        return \u003cimg src={src} /\u003e\n    }\n}\n\n```\n\n## Copyright and License\n\n[load-image-queue](https://github.com/pionl/load-image-queue)\nwas written by [Martin Kluska](http://kluska.cz) and is released under the \n[MIT License](LICENSE.md).\n\nCopyright (c) 2017 Martin Kluska","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpionl%2Fload-image-queue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpionl%2Fload-image-queue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpionl%2Fload-image-queue/lists"}