{"id":20731089,"url":"https://github.com/greg-md/ng-lazy-load","last_synced_at":"2025-04-23T22:05:27.880Z","repository":{"id":57114270,"uuid":"75427023","full_name":"greg-md/ng-lazy-load","owner":"greg-md","description":"Lazy loading images with Angular.","archived":false,"fork":false,"pushed_at":"2018-04-05T12:31:12.000Z","size":28,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T22:05:17.859Z","etag":null,"topics":["angular","greg-js","greg-md","image","javascript","js","lazy","lazy-load","lazyload","ng","ng-lazy-load","ts","typescript"],"latest_commit_sha":null,"homepage":"","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/greg-md.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-02T20:06:21.000Z","updated_at":"2023-08-01T00:01:30.000Z","dependencies_parsed_at":"2022-08-22T03:20:27.864Z","dependency_job_id":null,"html_url":"https://github.com/greg-md/ng-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/greg-md%2Fng-lazy-load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-lazy-load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-lazy-load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-lazy-load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greg-md","download_url":"https://codeload.github.com/greg-md/ng-lazy-load/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522300,"owners_count":21444511,"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":["angular","greg-js","greg-md","image","javascript","js","lazy","lazy-load","lazyload","ng","ng-lazy-load","ts","typescript"],"created_at":"2024-11-17T05:13:39.996Z","updated_at":"2025-04-23T22:05:27.385Z","avatar_url":"https://github.com/greg-md.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng Lazy Load\n\n[![npm version](https://badge.fury.io/js/%40greg-md%2Fng-lazy-load.svg)](https://badge.fury.io/js/%40greg-md%2Fng-lazy-load)\n[![Build Status](https://travis-ci.org/greg-md/ng-lazy-load.svg?branch=master)](https://travis-ci.org/greg-md/ng-lazy-load)\n\nLazy loading images with Angular.\n\n# Table of Contents:\n\n* [Installation](#installation)\n* [How It Works](#how-it-works)\n* [Directive Attributes](#directive-attributes)\n* [License](#license)\n* [Huuuge Quote](#huuuge-quote)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install @greg-md/ng-lazy-load --save\n```\n\n# How It Works\n\n### Setting up in a module\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n// 1. Import lazy loading module;\nimport { LazyLoadModule } from '@greg-md/ng-lazy-load';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    // 2. Register lazy loading module.\n    LazyLoadModule,\n  ],\n  declarations: [\n    AppComponent,\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Using in templates\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cimg src=\"loading.jpg\" lazy-load=\"lazy-image.jpg\" /\u003e\n  `,\n})\nexport class AppComponent { }\n```\n\n# Directive Attributes\n\n## threshold\n\nBy default images are loaded when they appear on the screen.\nIf you want images to load earlier, use threshold parameter.\nSetting threshold to 200 causes image to load 200 pixels before it appears on viewport.\n\n_Example:_\n\n```html\n\u003cimg src=\"loading.jpg\" lazy-load=\"lazy-image.jpg\" threshold=\"200\" /\u003e\n```\n\n## container\n\nYou can also use directive for images inside scrolling container,\nsuch as div with scrollbar. Just pass the container element.\n\n_Example:_\n\n```html\n\u003cdiv #container\u003e\n    \u003cimg src=\"loading.jpg\" lazy-load=\"lazy-image.jpg\" threshold=\"200\" [container]=\"container\" /\u003e\n\u003c/div\u003e\n```\n\n## bg-src\n\nSet default image in background and lazy load image directly in the `src` attribute.\n\n\u003e Useful with non-effective image URLs. This will avoid to load lazy image twice.\n\n_Example:_\n\n```html\n\u003cimg bg-src=\"loading.jpg\" lazy-load=\"lazy-image.jpg\" width=\"200\" height=\"200\" /\u003e\n```\n\n# License\n\nMIT © [Grigorii Duca](http://greg.md)\n\n# Huuuge Quote\n\n![I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad](http://greg.md/huuuge-quote-fb.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-lazy-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreg-md%2Fng-lazy-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-lazy-load/lists"}