Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greg-md/ng-lazy-load
Lazy loading images with Angular.
https://github.com/greg-md/ng-lazy-load
angular greg-js greg-md image javascript js lazy lazy-load lazyload ng ng-lazy-load ts typescript
Last synced: 3 months ago
JSON representation
Lazy loading images with Angular.
- Host: GitHub
- URL: https://github.com/greg-md/ng-lazy-load
- Owner: greg-md
- License: mit
- Created: 2016-12-02T20:06:21.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-05T12:31:12.000Z (almost 7 years ago)
- Last Synced: 2024-08-10T07:14:56.458Z (6 months ago)
- Topics: angular, greg-js, greg-md, image, javascript, js, lazy, lazy-load, lazyload, ng, ng-lazy-load, ts, typescript
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 12
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ng Lazy Load
[](https://badge.fury.io/js/%40greg-md%2Fng-lazy-load)
[](https://travis-ci.org/greg-md/ng-lazy-load)
Lazy loading images with Angular.
# Table of Contents:
* [Installation](#installation)
* [How It Works](#how-it-works)
* [Directive Attributes](#directive-attributes)
* [License](#license)
* [Huuuge Quote](#huuuge-quote)
## Installation
To install this library, run:
```bash
$ npm install @greg-md/ng-lazy-load --save
```
# How It Works
### Setting up in a module
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 1. Import lazy loading module;
import { LazyLoadModule } from '@greg-md/ng-lazy-load';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
// 2. Register lazy loading module.
LazyLoadModule,
],
declarations: [
AppComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Using in templates
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent { }
```
# Directive Attributes
## threshold
By default images are loaded when they appear on the screen.
If you want images to load earlier, use threshold parameter.
Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
_Example:_
```html
```
## container
You can also use directive for images inside scrolling container,
such as div with scrollbar. Just pass the container element.
_Example:_
```html
```
## bg-src
Set default image in background and lazy load image directly in the `src` attribute.
> Useful with non-effective image URLs. This will avoid to load lazy image twice.
_Example:_
```html
![]()
```
# License
MIT © [Grigorii Duca](http://greg.md)
# Huuuge Quote
