diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..a9ddbd8 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,5 @@ +export const cssClassNames = { + loaded: 'ng-lazyloaded', + loading: 'ng-lazyloading', + failed: 'ng-failed-lazyloaded', +} diff --git a/src/lazyload-image.directive.ts b/src/lazyload-image.directive.ts index 0da45be..3051844 100644 --- a/src/lazyload-image.directive.ts +++ b/src/lazyload-image.directive.ts @@ -17,8 +17,7 @@ import { } from '@angular/core'; import { getScrollListener } from './scroll-listener'; import { lazyLoadImage } from './lazyload-image'; - -const windowTarget = typeof window !== 'undefined' ? window : undefined; +import { isWindowDefined } from './utils'; interface LazyLoadImageDirectiveProps { lazyImage: string; @@ -45,7 +44,6 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe private propertyChanges$: ReplaySubject; private elementRef: ElementRef; private ngZone: NgZone; - private platformId: string; private scrollSubscription; constructor(el: ElementRef, ngZone: NgZone) { @@ -69,10 +67,8 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe ngAfterContentInit() { /** * Disable lazy load image in server side - * @see https://github.com/tjoskar/ng-lazyload-image/issues/178 - * @see https://github.com/tjoskar/ng-lazyload-image/issues/183 */ - if (typeof window === 'undefined') { + if (!isWindowDefined()) { return null; } @@ -81,6 +77,7 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe if (this.scrollObservable) { scrollObservable = this.scrollObservable.startWith(''); } else { + const windowTarget = isWindowDefined() ? window : undefined; scrollObservable = getScrollListener(this.scrollTarget || windowTarget); } this.scrollSubscription = this.propertyChanges$ diff --git a/src/lazyload-image.ts b/src/lazyload-image.ts index ad08180..957bd87 100644 --- a/src/lazyload-image.ts +++ b/src/lazyload-image.ts @@ -8,6 +8,7 @@ import 'rxjs/add/observable/of'; import { Observable } from 'rxjs/Observable'; import { getScrollListener } from './scroll-listener'; import { Rect } from './rect'; +import { cssClassNames } from './constants'; export function isVisible(element: HTMLElement, threshold = 0, _window: Window, scrollContainer?: HTMLElement) { const elementBounds = Rect.fromElement(element); @@ -110,16 +111,16 @@ function setLoadedStyle(element: HTMLImageElement | HTMLDivElement) { const styles = element.className .split(' ') .filter(s => !!s) - .filter(s => s !== 'ng-lazyloading'); - styles.push('ng-lazyloaded'); + .filter(s => s !== cssClassNames.loading); + styles.push(cssClassNames.loaded); element.className = styles.join(' '); return element; } export function lazyLoadImage(element: HTMLImageElement | HTMLDivElement, imagePath: string, defaultImagePath: string, errorImgPath: string, offset: number, useSrcset: boolean = false, scrollContainer?: HTMLElement) { setImageAndSourcesToDefault(element, defaultImagePath, useSrcset); - if (element.className && element.className.includes('ng-lazyloaded')) { - element.className = element.className.replace('ng-lazyloaded', ''); + if (element.className && element.className.includes(cssClassNames.loaded)) { + element.className = element.className.replace(cssClassNames.loaded, ''); } return (scrollObservable: Observable) => { @@ -131,7 +132,7 @@ export function lazyLoadImage(element: HTMLImageElement | HTMLDivElement, imageP .map(() => true) .catch(() => { setImageAndSourcesToError(element, errorImgPath, useSrcset); - element.className += ' ng-failed-lazyloaded'; + element.className += ' ' + cssClassNames.failed; return Observable.of(false); }) .do(() => setLoadedStyle(element)); diff --git a/src/scroll-listener.ts b/src/scroll-listener.ts index a643ea1..b7a2c12 100644 --- a/src/scroll-listener.ts +++ b/src/scroll-listener.ts @@ -3,6 +3,7 @@ import 'rxjs/add/operator/sampleTime'; import 'rxjs/add/operator/share'; import 'rxjs/add/observable/empty'; import { Observable } from 'rxjs/Observable'; +import { isWindowDefined } from './utils'; const scrollListeners = new WeakMap>(); @@ -17,7 +18,7 @@ export function sampleObservable(obs: Observable, scheduler?: any) { // Typical, there will only be one observable per application export const getScrollListener = (scrollTarget): Observable => { if (!scrollTarget || typeof scrollTarget.addEventListener !== 'function') { - if (typeof window !== 'undefined') { + if (isWindowDefined()) { console.warn('`addEventListener` on ' + scrollTarget + ' (scrollTarget) is not a function. Skipping this target'); } return Observable.empty(); diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..4c51a90 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,3 @@ +export function isWindowDefined() { + return typeof window !== 'undefined'; +}