sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-04-17 11:30:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

only prefetch after 500ms hover

Browse Source
This commit is contained in:
Florian Greistorfer
2026-02-09 10:06:42 +01:00
committed by Florian Greistorfer
parent 61c7f0cd43
commit f653f41b10
1 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/functionality.js
View File

@@ -18,10 +18,12 @@ class PhotoGallery {
this.openSwipe = this.openSwipe.bind(this); this.openSwipe = this.openSwipe.bind(this);
this.parseHierarchicalTags = this.parseHierarchicalTags.bind(this); this.parseHierarchicalTags = this.parseHierarchicalTags.bind(this);
this.prefetch = this.prefetch.bind(this); this.prefetch = this.prefetch.bind(this);
this.prefetchCancel = this.prefetchCancel.bind(this);
this.recursive = this.recursive.bind(this); this.recursive = this.recursive.bind(this);
this.renderTree = this.renderTree.bind(this); this.renderTree = this.renderTree.bind(this);
this.requestMetadata = this.requestMetadata.bind(this); this.requestMetadata = this.requestMetadata.bind(this);
this.reset = this.reset.bind(this); this.reset = this.reset.bind(this);
this.resetHoverTimer = this.resetHoverTimer.bind(this);
this.scrollFunction = this.scrollFunction.bind(this); this.scrollFunction = this.scrollFunction.bind(this);
this.setFilter = this.setFilter.bind(this); this.setFilter = this.setFilter.bind(this);
this.setupClickHandlers = this.setupClickHandlers.bind(this); this.setupClickHandlers = this.setupClickHandlers.bind(this);
@@ -227,10 +229,17 @@ class PhotoGallery {
const img = document.createElement("img"); const img = document.createElement("img");
img.src = this.shown[imgIndex]?.src || ""; img.src = this.shown[imgIndex]?.src || "";
prefetchDiv.removeChild(prefetchDiv.firstChild);
prefetchDiv.appendChild(img); prefetchDiv.appendChild(img);
} }
prefetchCancel() {
const prefetchDiv = document.getElementById("img-prefetch");
if (!prefetchDiv) return;
if (prefetchDiv.firstChild) {
prefetchDiv.removeChild(prefetchDiv.firstChild);
}
}
async recursive() { async recursive() {
this.showLoader(); this.showLoader();
const loc = new URL(window.location.href); const loc = new URL(window.location.href);
@@ -363,6 +372,16 @@ class PhotoGallery {
this.requestMetadata(); this.requestMetadata();
} }
resetHoverTimer(index) {
if (this.hoverTimer) {
clearTimeout(this.hoverTimer);
}
this.prefetchCancel();
this.hoverTimer = setTimeout(() => {
this.prefetch(index);
}, 500);
}
scrollFunction() { scrollFunction() {
const totopbutton = document.getElementById("totop"); const totopbutton = document.getElementById("totop");
if (!totopbutton) return; if (!totopbutton) return;
@@ -405,11 +424,25 @@ class PhotoGallery {
if (!isNaN(index)) this.openSwipe(index); if (!isNaN(index)) this.openSwipe(index);
}); });
imagelist.addEventListener("mousemove", (event) => { imagelist.addEventListener("mouseenter", (event) => {
const img = event.target.closest("img"); const img = event.target;
if (!img || !img.dataset.index) return; if (!img || !img.dataset.index) return;
const index = parseInt(img.dataset.index); const index = parseInt(img.dataset.index);
if (!isNaN(index)) this.prefetch(index); if (!isNaN(index)) this.resetHoverTimer(index);
});
imagelist.addEventListener("mousemove", (event) => {
const img = event.target;
if (!img || !img.dataset.index) return;
const index = parseInt(img.dataset.index);
if (!isNaN(index)) this.resetHoverTimer(index);
});
imagelist.addEventListener("mouseleave", () => {
if (this.hoverTimer) {
clearTimeout(this.hoverTimer);
}
this.prefetchCancel();
}); });
} }
} }