Imporve image lazy loading

This commit is contained in:
2026-01-28 12:15:08 +01:00
parent 43fc752535
commit 80e3aa95d8
5 changed files with 47 additions and 80 deletions

View File

@@ -8,46 +8,15 @@
// ============================================================
// Gallery Thumbnails Module
// ============================================================
// Thumbnail loading now relies on native loading="lazy" attribute.
// The browser handles deferred loading, connection limits, and
// automatic cancellation on navigation.
//
// This module is kept as a stub for potential future enhancements.
Luxtools.GalleryThumbnails = (function () {
function loadThumb(img) {
var src = img.getAttribute('data-thumb-src') || '';
if (!src) return;
if (img.getAttribute('data-thumb-loading') === '1') return;
img.setAttribute('data-thumb-loading', '1');
var pre = new window.Image();
pre.onload = function () {
img.src = src;
img.removeAttribute('data-thumb-src');
img.removeAttribute('data-thumb-loading');
};
pre.onerror = function () {
img.removeAttribute('data-thumb-loading');
};
pre.src = src;
}
function init() {
// Handle both gallery and imagebox thumbnails
var imgs = document.querySelectorAll('div.luxtools-gallery img[data-thumb-src], div.luxtools-imagebox img[data-thumb-src]');
if (!imgs || !imgs.length) return;
if ('IntersectionObserver' in window) {
var io = new window.IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
loadThumb(entry.target);
io.unobserve(entry.target);
});
}, { rootMargin: '200px' });
imgs.forEach(function (img) { io.observe(img); });
} else {
// Fallback: load soon after initial render
window.setTimeout(function () {
imgs.forEach(loadThumb);
}, 0);
}
// Native lazy loading handles everything.
// No JavaScript intervention needed.
}
return {