https://github.com/f22hd/ng-lazy-img

An angular directive that implementing lazy loading images.
https://github.com/f22hd/ng-lazy-img

angular7 directive-angular

Last synced: 10 days ago
JSON representation

An angular directive that implementing lazy loading images.

• Host: GitHub
• URL: https://github.com/f22hd/ng-lazy-img
• Owner: f22hd
• Created: 2019-05-22T07:01:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:41:56.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T10:52:06.992Z (16 days ago)
• Topics: angular7, directive-angular
• Language: TypeScript
• Homepage: https://ng-lazy-img.firebaseapp.com/
• Size: 2.76 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[Demo](https://ng-lazy-img.firebaseapp.com/)

## Getting Started

Add the directive to your app by run this command `npm i --save ng-lazy-img` in your terminal.

Then import the directive into your module , such as app.module.ts

```

import { NgLazyImgModule } from 'ng-lazy-img';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [ 

    ...

    NgLazyImgModule.forRoot({

      defaultImagePath:'/assets/default.png',

      threshold: .4,

      rootMargin:'0px'

    })

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Add the direcive in html image tag.

```  ```

Now, should images loading lazily in browsing.

##Notes:

The directive  will show default image until target image is loading.

This directive is using Intersection Observer API for implementing lazy loading. 

[Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

we can see an explanation our parameters in doc.

- threshold 

- rootMargin