Thumbnails verison 1

script.js

@@ -3,6 +3,46 @@
 (function () {
   'use strict';
 
+  function initGalleryThumbs() {
+    var imgs = document.querySelectorAll('div.filetools-gallery img[data-thumb-src]');
+    if (!imgs || !imgs.length) return;
+
+    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;
+    }
+
+    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);
+    }
+  }
+
   function getServiceUrl(el) {
     var url = el.getAttribute('data-service-url') || '';
     url = (url || '').trim();
@@ -120,4 +160,5 @@
   }
 
   document.addEventListener('click', onClick, false);
+  document.addEventListener('DOMContentLoaded', initGalleryThumbs, false);
 })();