ng-lazy-images
v1.0.1
Published
A very efficient image lazy loading tool based on user scroll. for blazing-fast page loading, with High-resolution images.
Downloads
12
Maintainers
Readme
Angular lazy load images
A very efficient image lazy loading tool based on user scroll. for blazing-fast page loading, with High-resolution images. and also SEO optimized.
Demo | Live Code Example
Please note that this version is still under development Github repo
Features
- Lazy load image on scroll
- Ability to use low-resolution image as a thumb, then it will be replaced with the HQ when loaded. (Beta version)
- Ability to add a fullback image, It will be loaded when the image URL is broken or not found.
- Ability to add loading a smooth loading effect
- Toggle console debugging for scrolling event
- Toggle force disable images caching
- SEO, The library dedects if the platfom is a browser, then it fires the scrolling listner event.
Setup
- run:
npm i ng-lazy-images
- import
NgLazyImagesModule
in your app.module.ts
import { NgLazyImagesModule } from 'ng-lazy-images'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgLazyImagesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Use the dicretive
ng-lazy-images
inside your to enable this package.
<img
ng-lazy-images -> Required
[lazySrc]="YOUR_HQ_IMG_URL" -> Required
[thumbSrc]="YOUR_THUMB_IMG_URL" -> Optional
[errorLazySrc]="FALLBACK_ALTERVATIVE_IMG_LINK" -> Optional
[debug]="false" -> Optional, Defualt is: false
[hasLoader]="true" -> Optional, Defualt is: false
[disableCaching]="false" -> Optional, Defualt is: false
/>
** Cation! don't use the regualr HTMl src
attribute, this will breake the package function, instead use the provided attributes in the previous example **
- Adding needed styles inside your global styles file, this code is only required if you need to enable image loading animation effect.
::ng-deep img[ng-lazy-images] {
&:not(.image-loaded, .thumb-loaded, .image-failed, .no-loader) {
background-color: #000;
animation-name: animation;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
}
}
@-webkit-keyframes animation {
0% {
background-color: rgb(190, 190, 190);
}
50.0% {
background-color: #ddd;
}
100.0% {
background-color: rgb(190, 190, 190);
}
}
@keyframes animation {
0% {
background-color: rgb(190, 190, 190);
}
50.0% {
background-color: #ddd;
}
100.0% {
background-color: rgb(190, 190, 190);
}
}
- Enjoy lazy load images, and high-speed performance.