xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

improving thumbnail loading

Browse Source
This commit is contained in:
Braun Patrik 2016-06-23 22:25:16 +02:00
parent 8f4237ae80
commit 1de7dabe52
5 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html
View File

@ -1,5 +1,5 @@
<div class="static" *ngIf="!animate"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></div>
<div class="sk-cube-grid animate" *ngIf="animate">
<div class="static" *ngIf="animate == false"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></div>
<div class="sk-cube-grid animate" *ngIf="animate == true">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>

8
frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts
View File

@ -1,6 +1,6 @@
///<reference path="../../../../../browser.d.ts"/>
import {Component} from "@angular/core";
import {Component, Input} from "@angular/core";
@Component({
selector: 'gallery-grid-photo-loading',
@ -9,10 +9,8 @@ import {Component} from "@angular/core";
})
export class GalleryPhotoLoadingComponent {
animate = false;
@Input() animate:boolean;
startAnimation() {
this.animate = true;
}
}

6
frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -1,11 +1,11 @@
<div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
<img #image [src]="imageSrc" [hidden]="!showImage">
<img #img [src]="image.src" [hidden]="!image.show">
<gallery-grid-photo-loading #loading [hidden]="!showLoading">
<gallery-grid-photo-loading [animate]="loading.animate" *ngIf="loading.show">
</gallery-grid-photo-loading>
<!--Info box -->
<div #info [hidden]="!showImage" class="info" [style.margin-top.px]="-infoStyle.height"
<div #info class="info" [style.margin-top.px]="-infoStyle.height"
[style.background]="infoStyle.background">
<div class="photo-name">{{gridPhoto.photo.name}}</div>

37
frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -17,13 +17,20 @@ import {GalleryPhotoLoadingComponent} from "./loading/loading.photo.grid.gallery
})
export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
@Input() gridPhoto:GridPhoto;
@ViewChild("image") imageRef:ElementRef;
@ViewChild("img") imageRef:ElementRef;
@ViewChild("info") infoDiv:ElementRef;
@ViewChild(GalleryPhotoLoadingComponent) loading:GalleryPhotoLoadingComponent;
imageSrc = "#";
showImage = false;
showLoading = false;
image = {
src: "#",
show: false
};
loading = {
animate: false,
show: false
};
infoStyle = {
height: 0,
background: "rgba(0,0,0,0.0)"
@ -41,22 +48,24 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
//schedule change after Angular checks the model
setImmediate(() => {
if (this.gridPhoto.isThumbnailAvailable()) {
this.imageSrc = this.gridPhoto.getThumbnailPath();
this.showImage = true;
this.showLoading = false;
this.image.src = this.gridPhoto.getThumbnailPath();
this.image.show = true;
this.loading.show = false;
} else {
this.showLoading = true;
this.loading.show = true;
this.thumbnailService.loadImage(this.gridPhoto,
()=> { //onLoadStarted
this.loading.startAnimation();
this.loading.animate = true;
},
()=> {//onLoaded
this.imageSrc = this.gridPhoto.getThumbnailPath();
this.showImage = true;
this.showLoading = false;
this.image.src = this.gridPhoto.getThumbnailPath();
this.image.show = true;
this.loading.show = false;
},
()=> {//onError
(error)=> {//onError
//TODO: handle error
console.error("something bad happened");
console.error(error);
});
}
});

35
frontend/app/gallery/grid/thumnailLoader.service.ts
View File

@ -13,21 +13,33 @@ export class ThumbnailLoaderService {
constructor() {
}
loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void {
removeTasks() {
this.que = [];
}
loadImage(gridPhoto:GridPhoto, onStartedLoading:()=>void, onLoad:()=>void, onError:(error)=>void):void {
let tmp:ThumbnailTask = null;
//is image already qued?
for (let i = 0; i < this.que.length; i++) {
if (this.que[i].gridPhoto.getThumbnailPath() == gridPhoto.getThumbnailPath()) {
tmp = this.que[i];
break;
}
}
//add to previous
if (tmp != null) {
tmp.onStartedLoading.push(onStartedLoading);
tmp.onLoad.push(onLoad);
tmp.onError.push(onError);
} else {
if (tmp.inProgress == true) {
onStartedLoading();
}
} else {//create new task
this.que.push({
gridPhoto: gridPhoto,
inProgress: false,
onStartedLoading: [onStartedLoading],
onLoad: [onLoad],
onError: [onError]
@ -43,20 +55,28 @@ export class ThumbnailLoaderService {
return;
}
this.runningRequests++;
let task = this.que.shift();
task.onStartedLoading.forEach(cb=>cb());
let task = this.que[0];
task.onStartedLoading.forEach(cb=>cb());
task.inProgress = true;
let curImg = new Image();
curImg.src = task.gridPhoto.getThumbnailPath();
curImg.onload = () => {
curImg.onload = () => {
task.gridPhoto.thumbnailLoaded();
task.onLoad.forEach(cb=>cb());
this.que.shift();
this.runningRequests--;
this.run();
};
curImg.onerror = (error) => {
curImg.onerror = (error) => {
task.onLoad.forEach(cb=>cb(error));
this.que.shift();
this.runningRequests--;
this.run();
};
@ -66,6 +86,7 @@ export class ThumbnailLoaderService {
interface ThumbnailTask {
gridPhoto:GridPhoto;
inProgress:boolean;
onStartedLoading:Array<Function>;
onLoad:Array<Function>;
onError:Array<Function>;