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:
parent
c2b4a80886
commit
8f4237ae80
@ -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 -->
|
||||||
|
@ -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");
|
||||||
|
Loading…
Reference in New Issue
Block a user