{"id":13481739,"url":"https://github.com/NathanWalker/ng2-image-lazy-load","last_synced_at":"2025-03-27T12:31:28.810Z","repository":{"id":142263080,"uuid":"46022742","full_name":"NathanWalker/ng2-image-lazy-load","owner":"NathanWalker","description":"Angular2 image lazy loader library.","archived":false,"fork":false,"pushed_at":"2020-09-04T00:09:38.000Z","size":3499,"stargazers_count":160,"open_issues_count":7,"forks_count":36,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-17T07:30:54.612Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://nathanwalker.github.io/ng2-image-lazy-load","language":"TypeScript","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/NathanWalker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-11-12T02:00:59.000Z","updated_at":"2024-06-09T15:50:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"c3188fb6-400e-4b2c-9104-690bc65c1c70","html_url":"https://github.com/NathanWalker/ng2-image-lazy-load","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fng2-image-lazy-load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fng2-image-lazy-load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fng2-image-lazy-load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fng2-image-lazy-load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NathanWalker","download_url":"https://codeload.github.com/NathanWalker/ng2-image-lazy-load/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222251869,"owners_count":16955919,"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-07-31T17:00:54.994Z","updated_at":"2024-10-30T15:31:24.595Z","avatar_url":"https://github.com/NathanWalker.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"[![Dependency Status](https://david-dm.org/NathanWalker/ng2-image-lazy-load.svg)](https://david-dm.org/NathanWalker/ng2-image-lazy-load)\n[![devDependency Status](https://david-dm.org/NathanWalker/ng2-image-lazy-load/dev-status.svg)](https://david-dm.org/NathanWalker/ng2-image-lazy-load#info=devDependencies)\n\n# Not currently maintained\n\nYou might try using [this great lazy load lib for now](https://github.com/tjoskar/ng-lazyload-image).\nThe only thing the above lib doesn't have is the Web Worker support - I hope to circle back and update this lib at some point in future or contribute worker support to tjoskar's lib.\n\n# ng2-image-lazy-load\n\nDemo: https://ng2-image-lazy-load-demo.herokuapp.com\n\n## Installation\n```sh\nnpm i ng2-image-lazy-load --save\n```\n\n## Example implementation\n\nThis library utilizes `WebWorkers` (https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) for background loading of images.\n\nBy default, the location of the worker file is `assets/js/xhrWorker.js`. You can copy this [xhrWorker.js](https://github.com/NathanWalker/ng2-image-lazy-load/blob/master/src/public/xhrWorker.js) file for your own use from this repo or you can create your own.\n\nTo set a custom path to load your worker file relative to your web server root:\n```\nWebWorkerService.workerUrl = 'path/to/your/custom_worker.js'\n```\nThe example below will help illustrate this.\n\nAlso, ensure you've loaded the angular/http bundle as well as this library falls back to using `Http` wherever `Worker` is not supported.\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule, Component} from '@angular/core';\nimport {HttpModule} from '@angular/http';\nimport {ImageLazyLoadModule, WebWorkerService} from 'ng2-image-lazy-load';\n\n// default: 'assets/js/xhrWorker.js'\nWebWorkerService.workerUrl = 'path/to/your/xhrWorker.js';\n\n// default: true\n// set to false if you want to force Http instead of WebWorker\nWebWorkerService.enabled = true;\n\n@Component({\n    selector: 'app',\n    template: `\n      \u003cdiv imageLazyLoadArea\u003e\n        \u003cdiv *ngFor=\"let image of images\"\u003e\n          \u003cimg [imageLazyLoadItem]=\"image.url\"/\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    `\n})\nexport class AppComponent {\n    public images: Array\u003cany\u003e = [\n      {\n        name:`image 1`,\n        url:`image.jpg`\n      },\n      {\n        name:`image 2`,\n        url:`image_2.jpg`\n      }\n    ];\n}\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpModule,\n        ImageLazyLoadModule\n    ],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Configuration\n\nYou can configure custom headers as well as custom loading, loaded and error classes by using the `imageLazyLoadConfig` directive:\n\n```\n// view template\n\u003cdiv imageLazyLoadArea [imageLazyLoadConfig]=\"lazyLoadConfig\"\u003e\n  \u003cdiv *ngFor=\"let image of images\"\u003e\n    \u003cimg [imageLazyLoadItem]=\"image.url\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n// Component\npublic lazyLoadConfig: IImageLazyLoadConfig = {\n  headers: {\n    'Authorization': 'Bearer auth-token'\n  },\n  loadingClass: 'custom-loading',\n  loadedClass: 'custom-loaded',\n  errorClass: 'custom-error'\n};\n```\n\n## API\n### ImageLazyLoaderService\n#### Properties:\n- `imageCache:any`: Object where the key is the url of the image the library has already loaded and doesn't need to be loaded again. i.e., {'http://domain.com/image.png':true}\n\n#### Methods:\n- `load(url: string, headers?: any): Promise\u003cany\u003e`: Load url with optional custom headers\n- `loadViaWorker(url: string, headers?: any): Promise\u003cany\u003e`: Use a webworker directly to load url with optional custom headers\n- `loadViaHttp(url: string, headers?: any): Promise\u003cany\u003e`: Use the `Http` service directly to load url with optional custom headers\n\n### WebWorkerService\n##### This is a helper service used by the library that wraps the usage of the browser's `Worker` api, however you can use it directly if you'd like to interact with it.\n#### Properties:\n- `static supported: boolean`: Determine if workers are supported\n- `static workerUrl: string`: Used to set the path to a worker file. Defaults to 'assets/js/xhrWorker.js'\n- `activeWorkers: Array\u003cany\u003e`: At any given moment, this can be checked to see how many workers are currently activated\n\n#### Methods:\n- `load(config: any, msgFn: any, errorFn?: any):number`: Load a configuration with your worker and wire it to a `message` function and/or an `error` function. Returns an `id` which can be used to terminate the worker.\n- `terminate(id: number)`: Terminate the worker\n\n\n# How to contribute\n\nSee [CONTRIBUTING](https://github.com/NathanWalker/ng2-image-lazy-load/blob/master/CONTRIBUTING.md)\n\n# Big Thank You\n\nThis library was made possible with help from this article by [Olivier Combe](https://github.com/ocombe):\nhttps://medium.com/@OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435\n\nAlso, this project setup is based on the excellent [angular2-seed](https://github.com/mgechev/angular2-seed) by [Minko Gechev](https://github.com/mgechev).\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fng2-image-lazy-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNathanWalker%2Fng2-image-lazy-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fng2-image-lazy-load/lists"}