58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
/* global window, document */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var Luxtools = window.Luxtools || (window.Luxtools = {});
|
|
|
|
// ============================================================
|
|
// Gallery Thumbnails Module
|
|
// ============================================================
|
|
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);
|
|
}
|
|
}
|
|
|
|
return {
|
|
init: init
|
|
};
|
|
})();
|
|
})();
|