ngx-imagesloaded

Angular 2+ wrapper package around imagesLoaded by Desandro. Detect when images have been loaded.

Table of Contents

• Installation
• Usage
• Changelog
• Paperwork
  • Contributing
  • Issue / Feature Request
  • Pull Request
• Credits
• License

Installation

npm install --save ngx-imagesloaded

yarn add ngx-imagesloaded

Usage

app.module.ts

import { NgModule } from '@angular/core';
import { NgxImagesloadedModule } from 'ngx-imagesloaded';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ NgxImagesloadedModule ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.html

<div imagesLoaded>
  <img src="IMAGE_URL_1" alt="Image #1">
  <img src="IMAGE_URL_2" alt="Image #2">
</div>

Options

You can pass options input to container element;

<div imagesLoaded [options]="{ background: true }">
  This container has background image
</div>

or create object inside app.component.ts using interface NgxImagesloadedOptions and pass to element;

imgOptions: NgxImagesloadedOptions = {
  background: '.item'
};

<div imagesLoaded [options]="imgOptions">
  <div class="item">#1</div>
  <div class="item">#2</div>
</div>

More information about options can be found here.

Events

Container element outputs some events;

For example: Triggered after all images have been loaded with at least one broken image;

<div imagesLoaded (fail)="handleFail($event)">
  <img src="IMAGE_URL_1" alt="Image #1">
  <img src="IMAGE_URL_2" alt="Image #2">
</div>

Full list of events can be found here.

Changelog

Please see Changelog Page for more information what has changed recently.

Paperwork

Contributing

Please see CONTRIBUTING.md for details.

Issue / Feature Request

To submit an issue correctly, please follow instructions

If you have an idea, and you want to request feature, then read this one

Pull Request

To crearte new pull request and add your piece of work in our project, go through this steps

Credits

• Zura Gabievi
• All contributors

License

The MIT License (MIT). Please see License file for more information.