1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00

improving grid performance

This commit is contained in:
Braun Patrik 2017-07-15 20:23:02 +02:00
parent 5cf8320c5f
commit 4883c29028
5 changed files with 128 additions and 110 deletions

View File

@ -6,9 +6,9 @@ a {
border: 2px solid #333;
width: 180px;
height: 180px;
background-color: #bbbbbb;
}
.no-image {
color: #7f7f7f;

View File

@ -54,12 +54,12 @@ img {
font-size: medium;
position: relative;
padding: 5px;
margin-top: -50px;
margin-top: 0;
transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: margin .3s ease-out, background-color .3s ease-out;
-moz-transition: margin .3s ease-out, background-color .3s ease-out;
-webkit-transition: margin .3s ease-out, background-color .3s ease-out;
-o-transition: margin .3s ease-out, background-color .3s ease-out;
}
.photo-container {

View File

@ -1,12 +1,16 @@
<div #photoContainer class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
<img #img [src]="thumbnail.Src" *ngIf="thumbnail.Available">
<gallery-grid-photo-loading [animate]="thumbnail.loading" *ngIf="!thumbnail.Available">
<gallery-grid-photo-loading
[animate]="thumbnail.loading"
*ngIf="!thumbnail.Available">
</gallery-grid-photo-loading>
<!--Info box -->
<div #info class="info" [style.margin-top.px]="-infoStyle.height"
[style.background]="infoStyle.background">
<div #info class="info"
*ngIf="infoBar.visible"
[style.margin-top.px]="infoBar.marginTop"
[style.background]="infoBar.background">
<div class="photo-name">{{gridPhoto.photo.name}}</div>
<div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">

View File

@ -5,12 +5,12 @@ import {SearchTypes} from "../../../../../common/entities/AutoCompleteItem";
import {RouterLink} from "@angular/router";
import {Thumbnail, ThumbnailManagerService} from "../../thumnailManager.service";
import {Config} from "../../../../../common/config/public/Config";
import {AnimationBuilder} from "@angular/animations";
@Component({
selector: 'gallery-grid-photo',
templateUrl: './photo.grid.gallery.component.html',
styleUrls: ['./photo.grid.gallery.component.css'],
providers: [RouterLink],
providers: [RouterLink]
})
export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
@Input() gridPhoto: GridPhoto;
@ -31,24 +31,26 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
};
*/
infoStyle = {
height: 0,
infoBar = {
marginTop: 0,
visible: false,
background: "rgba(0,0,0,0.0)"
};
animationTimer = null;
SearchTypes: any = [];
searchEnabled: boolean = true;
wasInView: boolean = null;
constructor(private thumbnailService: ThumbnailManagerService) {
constructor(private thumbnailService: ThumbnailManagerService,
private _animationBuilder: AnimationBuilder) {
this.SearchTypes = SearchTypes;
this.searchEnabled = Config.Client.Search.enabled;
}
ngOnInit() {
this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto);
}
@ -83,15 +85,28 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
this.gridPhoto.photo.metadata.positionData.country;
}
hover() {
this.infoStyle.height = this.infoDiv.nativeElement.clientHeight;
this.infoStyle.background = "rgba(0,0,0,0.8)";
this.infoBar.visible = true;
if (this.animationTimer != null) {
clearTimeout(this.animationTimer);
}
this.animationTimer = setTimeout(() => {
this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
this.infoBar.background = "rgba(0,0,0,0.8)";
}, 1);
}
mouseOut() {
this.infoStyle.height = 0;
this.infoStyle.background = "rgba(0,0,0,0.0)";
this.infoBar.marginTop = 0;
this.infoBar.background = "rgba(0,0,0,0.0)";
if (this.animationTimer != null) {
clearTimeout(this.animationTimer);
}
this.animationTimer = setTimeout(() => {
this.infoBar.visible = false;
}, 500);
}

View File

@ -165,7 +165,6 @@ export class ThumbnailLoaderService {
this.runningRequests++;
task.taskEntities.forEach(te => te.listener.onStartedLoading());
task.inProgress = true;
console.log("loading", task.path);
let curImg = new Image();
curImg.onload = () => {