diff --git a/README.md b/README.md index 2f597d0..ccab897 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,29 @@ -## ng2-lazyload-image +## ng-lazyload-image -> Lazy image loader for Angular 2 +> Lazy image loader for Angular ≥ v2 -[![Build Status](https://travis-ci.org/tjoskar/ng2-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng2-lazyload-image) [![npm version](https://badge.fury.io/js/ng2-lazyload-image.svg)](https://badge.fury.io/js/ng2-lazyload-image) -[![npm](https://img.shields.io/npm/l/ng2-lazyload-image.svg?maxAge=2592000)]() +[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image) +[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]() [![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5) About 150 loc and no dependencies (except for angular and rxjs of course) -Demo: http://tjoskar.github.io/ng2-lazyload-image/ +Demo: http://tjoskar.github.io/ng-lazyload-image/ ### Requirement The browser you targeting need to have support of `WeakMap`. If you need to support an older browser (like IE or Safari) you will need to include polyfill for `WeakMap` (see https://github.com/zloirock/core-js for example). ### Installation ``` -$ npm install ng2-lazyload-image --save +$ npm install ng-lazyload-image --save ``` -And then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/app.module.ts)): +And then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)): ```javascript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { LazyLoadImageModule } from 'ng2-lazyload-image'; +import { LazyLoadImageModule } from 'ng-lazyload-image'; import { AppComponent } from './app.component'; @NgModule({ @@ -61,7 +61,7 @@ It also supports background images, by using `backgroundImage`:
` }) diff --git a/changelog.md b/changelog.md index 9018e9f..8b372bd 100644 --- a/changelog.md +++ b/changelog.md @@ -1,11 +1,20 @@ # Changelog +## 3.0.0 (2017-03-25) + +### Feature +* Upgrade to Angular v4 +* Renamed project to ng-lazyload-image + +### Braking changes +* Renamed css class names from `ng2-lazyloaded` and `ng2-lazyloading` to `ng-lazyloaded` and `ng-lazyloading` respectively + ## 2.4.0 (2017-02-19) ### Features -* Make it possible to use default image as background. closes [#115](https://github.com/tjoskar/ng2-lazyload-image/issues/115). Thanks to [igoralemasow](https://github.com/igoralemasow) :tada: +* Make it possible to use default image as background. closes [#115](https://github.com/tjoskar/ng-lazyload-image/issues/115). Thanks to [igoralemasow](https://github.com/igoralemasow) :tada: ## 2.3.2 (2017-02-07) ### Bug Fixes -* Remove `src` as directive input. closes [#44](https://github.com/tjoskar/ng2-lazyload-image/issues/44) +* Remove `src` as directive input. closes [#44](https://github.com/tjoskar/ng-lazyload-image/issues/44) diff --git a/dist/package.json b/dist/package.json index c16f23c..16c0c6f 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,25 +1,25 @@ { - "name": "ng2-lazyload-image", - "version": "2.4.0", - "description": "Lazy image loader for Angular 2", + "name": "ng-lazyload-image", + "version": "3.0.0", + "description": "Lazy image loader for Angular > v2", "main": "index.js", "repository": { "type": "git", - "url": "git+https://github.com/tjoskar/ng2-lazyload-image.git" + "url": "git+https://github.com/tjoskar/ng-lazyload-image.git" }, "keywords": [ "lazy-load", "lazy-image", - "angular2" + "angular" ], "author": "Oskar Karlsson ", "license": "MIT", "bugs": { - "url": "https://github.com/tjoskar/ng2-lazyload-image/issues" + "url": "https://github.com/tjoskar/ng-lazyload-image/issues" }, - "homepage": "https://github.com/tjoskar/ng2-lazyload-image#readme", + "homepage": "https://github.com/tjoskar/ng-lazyload-image#readme", "peerDependencies": { - "@angular/core": "^2.0.0", - "rxjs": "^5.0.0-beta.11" + "@angular/core": ">=2.0.0", + "rxjs": ">=5.0.0" } } diff --git a/example/bg-image.component.ts b/example/bg-image.component.ts index e8c1abb..359258b 100644 --- a/example/bg-image.component.ts +++ b/example/bg-image.component.ts @@ -11,7 +11,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; background-size: cover; } - div.ng2-lazyloaded { + div.ng-lazyloaded { animation: fadein .5s; } diff --git a/example/default-image.component.ts b/example/default-image.component.ts index c3b7951..8017aca 100644 --- a/example/default-image.component.ts +++ b/example/default-image.component.ts @@ -9,7 +9,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; min-height: 1127px; } - img.ng2-lazyloaded { + img.ng-lazyloaded { animation: fadein .5s; } diff --git a/example/fade-in-image.component.ts b/example/fade-in-image.component.ts index d3e445b..7c0ee44 100644 --- a/example/fade-in-image.component.ts +++ b/example/fade-in-image.component.ts @@ -11,7 +11,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; opacity: 0; } - img.ng2-lazyloaded { + img.ng-lazyloaded { opacity: 1; } `], diff --git a/example/pixelated-image.component.ts b/example/pixelated-image.component.ts index 527c871..f57fbc8 100644 --- a/example/pixelated-image.component.ts +++ b/example/pixelated-image.component.ts @@ -28,7 +28,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; transition: opacity 1s; opacity: 0; } - .ng2-lazyloaded { + .ng-lazyloaded { opacity: 1; } `], diff --git a/example/scroll-container.component.ts b/example/scroll-container.component.ts index 87ce07d..83ede2b 100644 --- a/example/scroll-container.component.ts +++ b/example/scroll-container.component.ts @@ -9,7 +9,7 @@ import { Component, ChangeDetectionStrategy, ElementRef } from '@angular/core'; min-height: 1127px; } - img.ng2-lazyloaded { + img.ng-lazyloaded { animation: fadein .5s; } diff --git a/package.json b/package.json index f1b4f11..f40b0f4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "ng2-lazyload-image", - "version": "2.4.0", - "description": "Lazy image loader for Angular 2", + "name": "ng-lazyload-image", + "version": "3.0.0", + "description": "Lazy image loader for Angular > v2", "main": "index.js", "scripts": { "prepublish": "npm run build", @@ -18,19 +18,19 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/tjoskar/ng2-lazyload-image.git" + "url": "git+https://github.com/tjoskar/ng-lazyload-image.git" }, "keywords": [ "lazy-load", "lazy-image", - "angular2" + "angular" ], "author": "Oskar Karlsson ", "license": "MIT", "bugs": { - "url": "https://github.com/tjoskar/ng2-lazyload-image/issues" + "url": "https://github.com/tjoskar/ng-lazyload-image/issues" }, - "homepage": "https://github.com/tjoskar/ng2-lazyload-image#readme", + "homepage": "https://github.com/tjoskar/ng-lazyload-image#readme", "peerDependencies": { "@angular/core": ">=2.0.0", "rxjs": ">=5.0.0" diff --git a/src/lazyload-image.ts b/src/lazyload-image.ts index e042005..bb7da0b 100644 --- a/src/lazyload-image.ts +++ b/src/lazyload-image.ts @@ -56,8 +56,8 @@ function setLoadedStyle(element: HTMLElement) { const styles = element.className .split(' ') .filter(s => !!s) - .filter(s => s !== 'ng2-lazyloading'); - styles.push('ng2-lazyloaded'); + .filter(s => s !== 'ng-lazyloading'); + styles.push('ng-lazyloaded'); element.className = styles.join(' '); return element; }