{"id":22356851,"url":"https://github.com/ayamflow/image-progress","last_synced_at":"2025-07-30T10:32:40.157Z","repository":{"id":18302602,"uuid":"21478644","full_name":"ayamflow/image-progress","owner":"ayamflow","description":"A wrapper for loading image via XHR and dispatching loading events.","archived":false,"fork":false,"pushed_at":"2015-05-29T09:20:13.000Z","size":196,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-11T11:15:00.668Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayamflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-03T22:19:30.000Z","updated_at":"2022-11-24T20:13:18.000Z","dependencies_parsed_at":"2022-08-25T12:41:41.842Z","dependency_job_id":null,"html_url":"https://github.com/ayamflow/image-progress","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fimage-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fimage-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fimage-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fimage-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayamflow","download_url":"https://codeload.github.com/ayamflow/image-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228124602,"owners_count":17873170,"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":[],"created_at":"2024-12-04T14:12:12.610Z","updated_at":"2024-12-04T14:12:13.138Z","avatar_url":"https://github.com/ayamflow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"image-progress\n=========\n\nA wrapper for loading image via XHR and dispatching progress events.\n\n## How to use\n\n### 1. Install the plugin.\nWith npm:\n```\nnpm i image-progress --save\n```\n\nWith Component(1):\n```\ncomponent install ayamflow/image-progress\n```\n\n### 2. Use\n\n```javascript\nvar Progress = require('image-progress');\n\nvar img = new Progress('test-img.png');\n\nimg.on('error', function(event) {\n    console.log('there has been an error', event);\n});\n\nimg.on('progress', function(event) {\n    console.log('The image is ' + event.progress * 100 + '% loaded !', event.loaded, event.total, event.progress);\n});\n\nimg.on('complete', function(event) {\n    console.log('The image is loaded.');\n});\n\nimg.on('start', function(event) {\n    console.log('The image with URL ' + event.url + ' has started loading');\n});\n\nimg.load();\n```\n\nBy default, the `event.progress` only has 2 decimals. You can set the number of decimals by passing the `leading` property as an instanciation option.\n\n## Methods\n* ### `new Progress(url, params)`\n\n`url`: the URL for the image you want to load.\n\n`params`: the params hash is used if you need to store \u0026 retrieve any property on the `start` \u0026 `complete` events. You can also pass different options there (see the options section below).\n\n* ### `load()`\n\nStarts the loading. It will fire a `start` event.\n\n* ### `destroy()`\n\nRemoves all internal \u0026 external listeners, and clears the XHR object.\n\nBy default, this method is called after the `complete` and/or `error` events are triggered. you can disable this behavior by passing the `autoclear: false` as an instanciation option.\n\n## Instanciation options\n* ### `onStart`, `onError`, `onProgress`, `onComplete` (default: null)\n\nCallbacks to be called when the appropriate events are fired.\n\n* ### `autoload` (default: false)\n\nWether the loading should start automatically on instanciation. If you set it to `true`, be sure to also pass `onProgress`/`onComplete` callbacks as well or you won't be able to listen for completion.\n\n* ### `leading` (default: 2)\n\nThe number of decimals in the `event.progress` property.\n\n* ### `autoclear` (default: true)\n\nSet wether the `destroy` method should be automatically called after a `complete` or `error` event.\n\n* ### `jsonp` (default: false)\n\nUses [jsonp](http://en.wikipedia.org/wiki/JSONP) in order to bypass [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restrictions\n\n## Events\n* `start`: fired when the loading starts. The event contains a reference to the `options` hash, as well as the `url`.\n* `progress`: fired each time the XHR request updates. The event has 3 properties: `loaded`, `total` and `progress`.\n* `complete'`: fired when the loading is complete. The event contains a reference to the `options` hash, as well as the `url`.\n* `error`: fired when a network-related error is raised.\n\n## Properties\n* ### `total`: the total bytes to load\n* ### `loaded`: the loaded bytes loaded\n* ### `progress`: the loading progress, between 0 and 1","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fimage-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayamflow%2Fimage-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fimage-progress/lists"}