diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html index 08c05c8..e263a9e 100755 --- a/frontend/src/ketr-photos/ketr-photos.html +++ b/frontend/src/ketr-photos/ketr-photos.html @@ -323,6 +323,8 @@ start = 0; stop = this.thumbnails.length - 1; + /* If there were visible thumbs, use the one from the middle as the starting + * point to check visibility. Otherwise, binary-tree the entire image list */ if (this.visibleThumbs.length) { index = this.visibleThumbs[this.visibleThumbs.length >> 1]; } else { @@ -390,6 +392,16 @@ this.thumbnails[index].visible = false; }.bind(this)); + /* Randomly index the visible array, keeping the center + * in the middle. This makes the loading look more organic. */ + for (var i = 0; i < visible.length >> 1; i++) { + if (Math.rand() > 0.5) { + var tmp = visible[i]; + visible[i] = visible[visible.length - 1]; + visible[visible.length - 1] = tmp; + } + } + /* Turn on visibility for any item that is now visible */ visible.forEach(function(index) { if (this.thumbnails[index].visible != true) { @@ -398,7 +410,7 @@ }.bind(this)); this.visibleThumbs = visible; - }, 250); + }); }, findPhoto: function(photo) {