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");
previewLinks = document.getElementsByClassName("previewLink");
headerImage = document.getElementById("headerImage");
loadingImage = new Image()
loadingImage.src = "/loading.gif"
touchDragThreshold = 50;
directionDetermined = false;
@ -16,13 +18,25 @@ touchDirection = null;
// changes to style.rotate are necessary because transformed elements
// 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) {
viewState = photos.indexOf(filename);
galleryImage.fullRes = filename;
galleryImage.src = "/compressed/compressed_" + filename;
galleryContainer.style.display = "block";
document.body.style = "overflow:hidden;"
headerImage.style.rotate = "none";
loadImage()
};
function delGallery () {
@ -37,8 +51,7 @@ function nextImage () {
if (viewState == previewLinks.length) {
viewState = 0;
};
galleryImage.fullRes = photos[viewState];
galleryImage.src = "/compressed/compressed_" + photos[viewState];
loadImage()
};
function prevImage () {
@ -46,8 +59,7 @@ function prevImage () {
if (viewState == -1) {
viewState = previewLinks.length - 1;
};
galleryImage.fullRes = photos[viewState];
galleryImage.src = "/compressed/compressed_" + photos[viewState];
loadImage()
};
function imageNewTab () {

View File

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