add load spinner

This commit is contained in:
nebula 2025-05-01 06:15:55 +00:00
parent f6b70801b0
commit 19c9322cdb
2 changed files with 22 additions and 10 deletions

View File

@ -4,6 +4,8 @@ galleryContainer = document.getElementById("galleryContainer");
galleryImage = document.getElementById("galleryImage"); galleryImage = document.getElementById("galleryImage");
previewLinks = document.getElementsByClassName("previewLink"); previewLinks = document.getElementsByClassName("previewLink");
headerImage = document.getElementById("headerImage"); headerImage = document.getElementById("headerImage");
loadingImage = new Image()
loadingImage.src = "/loading.gif"
touchDragThreshold = 50; touchDragThreshold = 50;
directionDetermined = false; directionDetermined = false;
@ -16,13 +18,25 @@ touchDirection = null;
// changes to style.rotate are necessary because transformed elements // changes to style.rotate are necessary because transformed elements
// get stuck in front of the gallery images // get stuck in front of the gallery images
function loadImage () {
image = new Image();
image.src = "/compressed/compressed_" + photos[viewState];
timeout = window.setTimeout(function () {
galleryImage.src = loadImage.src;
}, 400)
image.onload = function () {
window.clearTimeout(timeout);
galleryImage.fullRes = photos[viewState];
galleryImage.src = image.src;
}
}
function enlargeImage (filename) { function enlargeImage (filename) {
viewState = photos.indexOf(filename); viewState = photos.indexOf(filename);
galleryImage.fullRes = filename;
galleryImage.src = "/compressed/compressed_" + filename;
galleryContainer.style.display = "block"; galleryContainer.style.display = "block";
document.body.style = "overflow:hidden;" document.body.style = "overflow:hidden;"
headerImage.style.rotate = "none"; headerImage.style.rotate = "none";
loadImage()
}; };
function delGallery () { function delGallery () {
@ -37,8 +51,7 @@ function nextImage () {
if (viewState == previewLinks.length) { if (viewState == previewLinks.length) {
viewState = 0; viewState = 0;
}; };
galleryImage.fullRes = photos[viewState]; loadImage()
galleryImage.src = "/compressed/compressed_" + photos[viewState];
}; };
function prevImage () { function prevImage () {
@ -46,8 +59,7 @@ function prevImage () {
if (viewState == -1) { if (viewState == -1) {
viewState = previewLinks.length - 1; viewState = previewLinks.length - 1;
}; };
galleryImage.fullRes = photos[viewState]; loadImage()
galleryImage.src = "/compressed/compressed_" + photos[viewState];
}; };
function imageNewTab () { function imageNewTab () {

View File

@ -253,9 +253,9 @@
"cover": "IMG_9135.JPEG" "cover": "IMG_9135.JPEG"
}, },
"Molossia": { "Molossia": {
"title": "The Republic of Molossia", "title": "The Republic of Molossia",
"state": "Molossia", "state": "Molossia",
"cover": "20240622_102605.jpg", "cover": "20240622_102605.jpg",
"story_time": 1745571443 "story_time": 1745571443
} }
} }