1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00

improving thumbnail loader

This commit is contained in:
Braun Patrik 2016-06-22 16:40:02 +02:00
parent c2b4a80886
commit 8f4237ae80
2 changed files with 5 additions and 1 deletions

View File

@ -1,7 +1,7 @@
<div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()"> <div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
<img #image [src]="imageSrc" [hidden]="!showImage"> <img #image [src]="imageSrc" [hidden]="!showImage">
<gallery-grid-photo-loading #loading *ngIf="!showImage"> <gallery-grid-photo-loading #loading [hidden]="!showLoading">
</gallery-grid-photo-loading> </gallery-grid-photo-loading>
<!--Info box --> <!--Info box -->

View File

@ -23,6 +23,7 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
imageSrc = "#"; imageSrc = "#";
showImage = false; showImage = false;
showLoading = false;
infoStyle = { infoStyle = {
height: 0, height: 0,
background: "rgba(0,0,0,0.0)" background: "rgba(0,0,0,0.0)"
@ -42,7 +43,9 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
if (this.gridPhoto.isThumbnailAvailable()) { if (this.gridPhoto.isThumbnailAvailable()) {
this.imageSrc = this.gridPhoto.getThumbnailPath(); this.imageSrc = this.gridPhoto.getThumbnailPath();
this.showImage = true; this.showImage = true;
this.showLoading = false;
} else { } else {
this.showLoading = true;
this.thumbnailService.loadImage(this.gridPhoto, this.thumbnailService.loadImage(this.gridPhoto,
()=> { //onLoadStarted ()=> { //onLoadStarted
this.loading.startAnimation(); this.loading.startAnimation();
@ -50,6 +53,7 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
()=> {//onLoaded ()=> {//onLoaded
this.imageSrc = this.gridPhoto.getThumbnailPath(); this.imageSrc = this.gridPhoto.getThumbnailPath();
this.showImage = true; this.showImage = true;
this.showLoading = false;
}, },
()=> {//onError ()=> {//onError
console.error("something bad happened"); console.error("something bad happened");