{"id":19970209,"url":"https://github.com/webdeveric/image-preloader","last_synced_at":"2026-06-11T15:31:06.765Z","repository":{"id":34394039,"uuid":"38321458","full_name":"webdeveric/image-preloader","owner":"webdeveric","description":"Preload images then do something else","archived":false,"fork":false,"pushed_at":"2017-07-06T16:08:40.000Z","size":66,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-27T13:34:03.323Z","etag":null,"topics":["image-preloader","preload","preload-images","promise"],"latest_commit_sha":null,"homepage":"","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/webdeveric.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":"2015-06-30T16:52:32.000Z","updated_at":"2017-07-11T18:01:08.000Z","dependencies_parsed_at":"2022-09-14T06:01:23.871Z","dependency_job_id":null,"html_url":"https://github.com/webdeveric/image-preloader","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/webdeveric/image-preloader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fimage-preloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fimage-preloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fimage-preloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fimage-preloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdeveric","download_url":"https://codeload.github.com/webdeveric/image-preloader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fimage-preloader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34206487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-preloader","preload","preload-images","promise"],"created_at":"2024-11-13T02:53:31.876Z","updated_at":"2026-06-11T15:31:06.713Z","avatar_url":"https://github.com/webdeveric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Preloader\n\n[![dependencies Status](https://david-dm.org/webdeveric/image-preloader/status.svg)](https://david-dm.org/webdeveric/image-preloader)\n[![devDependencies Status](https://david-dm.org/webdeveric/image-preloader/dev-status.svg)](https://david-dm.org/webdeveric/image-preloader?type=dev)\n\nPreload images using promises.\n\n## Installation\n\n```shell\nnpm install @webdeveric/image-preloader --save\n```\n\n## Prerequisites\n\nPreloader uses [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which are a part of ECMAScript 2015 (ES6), so you'll need a polyfill for older browsers.\n\n## Example Usage (es2015)\n\n```javascript\nimport Preloader from '@webdeveric/image-preloader';\n\nlet loader = new Preloader( { images: [\n  'http://placekitten.com/200/200',\n  'http://placekitten.com/400/400',\n] } );\n\nloader.start().then( results =\u003e {\n  console.log( results );\n}, error =\u003e {\n  console.error( error );\n});\n```\n\n## Settings\n\nThe constructor takes one argument, which is an object of settings.\n\n### images\n\nThe `images` setting can be any iterable that has a `forEach` method, like Array or Set.\n\n```javascript\nlet myImages = [\n  'eric.jpg',\n  'ginger.jpg'\n];\n\nlet loader = new Preloader( { images: myImages } );\n```\n\n```javascript\nlet myImages = new Set();\nmyImages.add('eric.jpg');\nmyImages.add('ginger.jpg');\nmyImages.add('ginger.jpg');\n\nlet loader = new Preloader( { images: myImages } );\n```\n\n### timeout\n\nNumber of milliseconds. The default is 30000.\n\n```javascript\nlet loader = new Preloader( {\n  images: myImages,\n  timeout: 10000\n} );\n```\n\n### beforeStart\n\n`beforeStart` is optional and defaults to an empty function.\n\n```javascript\nlet loader = new Preloader( {\n  images: myImages,\n  beforeStart: function() {\n    // Do some stuff here, like resetting a progress bar to zero.\n    // You can abort the preloader by returning false or by throwing an error.\n    return false;\n  }\n} );\n```\n\n### onProgress\n\n`onProgress` is optional and defaults to an empty function.\n\nThis function is called every time an image completes or fails.\n\n`onProgress` receives two arguments, `tick` and `preloader`.\nThe `tick` object contains four fields that let you know what happened.\n`preloader` is the `Preloader` instance, which you can use to check the percent complete.\n\n**tick object**\n\n```javascript\n{\n  settings: Object,\n  loaded: Boolean,\n  image: Image object or null,\n  error: Error object or null\n}\n```\n\n**Example: Setting progress bar**\n\n```javascript\nlet loader = new Preloader( {\n  images: myImages,\n  onProgress: function( tick, preloader ) {\n    if ( tick.loaded ) {\n      console.log( tick.image );\n    } else {\n      console.log( tick.error );\n    }\n\n    // You can set a progress bar value using preloader.percentComplete\n    let progress = document.getElementById('preload-progress');\n    progress.setAttribute('value', preloader.percentComplete );\n  }\n} );\n```\n\n## Properties\n\n### length\n\nThe number of items in the `images` object.\n\n### completed\n\nThe number of images that have loaded.\n\n### percentComplete\n\nThis is a float between 0 and 1 that represents the percent completed.\nIt may be used to set the value of a progress bar.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdeveric%2Fimage-preloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdeveric%2Fimage-preloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdeveric%2Fimage-preloader/lists"}