diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts index 041e0b8e..edbf4dda 100644 --- a/frontend/app/gallery/grid/grid.gallery.component.ts +++ b/frontend/app/gallery/grid/grid.gallery.component.ts @@ -29,6 +29,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy @ViewChild('gridContainer') gridContainer: ElementRef; @ViewChildren(GalleryPhotoComponent) gridPhotoQL: QueryList; + private scrollListenerPhotos: GalleryPhotoComponent[] = []; @Input() photos: Array; @Input() lightbox: GalleryLightboxComponent; @@ -89,6 +90,11 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy ngAfterViewInit() { this.lightbox.setGridPhotoQL(this.gridPhotoQL); + if (Config.Client.enableOnScrollThumbnailPrioritising === true) { + this.gridPhotoQL.changes.subscribe(() => { + this.scrollListenerPhotos = this.gridPhotoQL.filter(pc => pc.ScrollListener); + }); + } this.updateContainerDimensions(); this.sortPhotos(); @@ -188,15 +194,19 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy @HostListener('window:scroll') onScroll() { - if (!this.onScrollFired) { + if (!this.onScrollFired && + // should we trigger this at all? + (this.renderedPhotoIndex < this.photos.length || this.scrollListenerPhotos.length > 0)) { window.requestAnimationFrame(() => { this.renderPhotos(); if (Config.Client.enableOnScrollThumbnailPrioritising === true) { - this.gridPhotoQL.toArray().forEach((pc: GalleryPhotoComponent) => { + this.scrollListenerPhotos.forEach((pc: GalleryPhotoComponent) => { pc.onScroll(); }); + this.scrollListenerPhotos = this.scrollListenerPhotos.filter(pc => pc.ScrollListener); } + this.onScrollFired = false; }); this.onScrollFired = true; diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts index 7d501889..60da3393 100644 --- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts +++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts @@ -6,6 +6,7 @@ import {RouterLink} from '@angular/router'; import {Thumbnail, ThumbnailManagerService} from '../../thumnailManager.service'; import {Config} from '../../../../../common/config/public/Config'; import {AnimationBuilder} from '@angular/animations'; +import {PageHelper} from '../../../model/page.helper'; @Component({ selector: 'app-gallery-grid-photo', @@ -53,13 +54,16 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy { isInView(): boolean { - return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight - && document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop; + return PageHelper.ScrollY < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight + && PageHelper.ScrollY + window.innerHeight > this.container.nativeElement.offsetTop; } + get ScrollListener(): boolean { + return !this.thumbnail.Available && !this.thumbnail.Error; + } onScroll() { - if (this.thumbnail.Available === true) { + if (this.thumbnail.Available === true || this.thumbnail.Error === true) { return; } const isInView = this.isInView(); diff --git a/frontend/app/gallery/share/share.gallery.component.html b/frontend/app/gallery/share/share.gallery.component.html index a080980f..a34f4601 100644 --- a/frontend/app/gallery/share/share.gallery.component.html +++ b/frontend/app/gallery/share/share.gallery.component.html @@ -20,7 +20,7 @@