Commit 533b72bc authored by Zéfling's avatar Zéfling 🎨
Browse files

Images lazy loading

parent 9e92d46c
......@@ -8,12 +8,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LightboxModule } from 'ngx-lightbox';
import { AppRoutingModule } from './app-routing.module';
// directives
import { LazyImgDirective } from './directives/lazy-img.directive';
// components
import { AppComponent } from './app.component';
import { TweetsCalendarComponent } from './tweets/tweets-calendar.component';
import { MomentsListComponent } from './moments/moments-list.component';
import { MessagesListComponent } from './messages/messages-list.component';
// pipe
// pipes
import { NgForObjectPipe } from './pipes/ngfor-object';
import { MouthPipe } from './pipes/mouth';
import { SafePipe } from './pipes/safe';
......@@ -51,6 +53,9 @@ const appRoutes: Routes = [
@NgModule({
declarations: [
// directive
LazyImgDirective,
// components
AppComponent,
TweetsCalendarComponent,
......
import { Directive, Input, ElementRef, ChangeDetectorRef, HostListener, HostBinding } from '@angular/core';
/**
* lazy loading for images
*/
@Directive({ selector: '[lazy-img]' })
export class LazyImgDirective {
@Input('lazy-src') lazyImg: string;
private element: HTMLElement;
private visible = false;
constructor(
private elementRef: ElementRef,
private cdr: ChangeDetectorRef
) {
this.element = elementRef.nativeElement;
setTimeout(() => {
this.onScroll();
});
}
@HostListener('window:scroll')
onScroll() {
if (!this.visible) {
const pageTop = window.scrollY - 300;
const pageBottom = pageTop + window.innerHeight + 300;
const elementTop = this.element.offsetTop;
const elementBottom = elementTop + this.element.offsetHeight;
if (elementTop <= pageBottom && elementBottom >= pageTop) {
this.visible = true;
if (this.element.tagName === 'IMG') {
(this.element as HTMLInputElement).src = this.lazyImg;
}
}
}
}
}
......@@ -45,7 +45,8 @@
<div class="tweet-media"
*ngIf="testImage(tweet.tweet.media)">
<img *ngFor="let media of tweet.tweet.media"
[src]="imageUrl(tweet.tweet, media)"
lazy-img
[lazy-src]="imageUrl(tweet.tweet, media)"
[alt]="media.mediaId"
(click)="openImage(media)">
</div>
......
......@@ -57,7 +57,8 @@
<div class="tweet-media"
*ngIf="testImage(tweet.entities.media)">
<img *ngFor="let media of tweet.entities.media"
[src]="imageUrl(tweet, media)"
lazy-img
[lazy-src]="imageUrl(tweet, media)"
[alt]="media.id"
(click)="openImage(media)">
</div>
......
......@@ -121,11 +121,11 @@
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-input-rename": false,
"no-output-rename": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment