angular-lazy-img

WebJar for angular-lazy-img

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-lazy-img
Last Version	1.5.1
Release Date	Feb 6, 2019
Type	jar
Description	angular-lazy-img WebJar for angular-lazy-img
Project URL	http://webjars.org
Source Code Management	https://github.com/Pentiado/angular-lazy-img

Download angular-lazy-img

Filename	Size
angular-lazy-img-1.5.1.pom
angular-lazy-img-1.5.1.jar	9 KB
angular-lazy-img-1.5.1-sources.jar	22 bytes
angular-lazy-img-1.5.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-lazy-img/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-lazy-img</artifactId>
    <version>1.5.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-lazy-img/
implementation 'org.webjars.bower:angular-lazy-img:1.5.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-lazy-img/
implementation ("org.webjars.bower:angular-lazy-img:1.5.1")

Apache Buildr

'org.webjars.bower:angular-lazy-img:jar:1.5.1'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-lazy-img" rev="1.5.1">
  <artifact name="angular-lazy-img" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-lazy-img', version='1.5.1')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-lazy-img" % "1.5.1"

Leiningen

[org.webjars.bower/angular-lazy-img "1.5.1"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.0.8,)

Project Modules

There are no modules declared in this project.

angular-lazy-img

Lightweight lazy load images plugin. Only 1kb after gziping. Pure JavaScript, only Angular as dependency.

Installation

1. bower install --save angular-lazy-img

2. Include angular-lazy-img in your HTML.

   <script src="<your-bower-components>/angular-lazy-img/release/angular-lazy-img.js"></script>

3. Inject the angular-lazy-img module in your application.

   angular.module('your.module', [
       'angularLazyImg'
   ]);

Usage

Just add lazy-img attribute with source to file that you want to lazy load

<img lazy-img='photo.jpeg' />

If you want show spinner put it in src attribute

<img src='spinner.gif' lazy-img='photo.jpeg' />

If you want load a default image when requested gets an error use lazy-img-error attribute

<img lazy-img='photo.jpeg' lazy-img-error='no-photo.jpeg' />

You want to lazy load background image? No problem, add directive to anything you like and it will handle the rest.

<div lazy-img='photo.jpeg'></div>

If you need to run the image check manually (for example when clicking on tabs that filter your image result), you can trigger it that way:

$rootScope.$emit('lazyImg:refresh');

On success and error lazyImg will trigger events on $rootScope - lazyImg:success and lazyImg:error, passing as first param image

Configuration

Inside your config require 'lazyImgConfigProvider' and set custom options.

angular.module('your.module', [
  'angularLazyImg'
]).config(['lazyImgConfigProvider', function(lazyImgConfigProvider){
  var scrollable = document.querySelector('#scrollable');
  lazyImgConfigProvider.setOptions({
    offset: 100, // how early you want to load image (default = 100)
    errorClass: 'error', // in case of loading image failure what class should be added (default = null)
    successClass: 'success', // in case of loading image success what class should be added (default = null)
    onError: function(image){}, // function fired on loading error
    onSuccess: function(image){}, // function fired on loading success
    container: angular.element(scrollable) // if scrollable container is not $window then provide it here. This can also be an array of elements.
  });
}])

Use a scrollable container in a dynamic page

Just add lazy-img-container attribute to your scrollable container to be considered when you scroll him.

Author

Copyright 2017, Paweł Wszoła ([email protected])

Versions

Version
1.5.1 Feb 6, 2019
1.2.2 Apr 9, 2017