Imporve image lazy loading
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user