Add gallery-lazy.js for background image lazy loading

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 00:59:33 +01:00
parent 6047914d2c
commit 2ca1d2c2e7
1 changed files with 26 additions and 0 deletions
@@ -0,0 +1,26 @@
+// Ленивая загрузка фоновых изображений галереи через Intersection Observer
+(function () {
+  if (!('IntersectionObserver' in window)) {
+    // Fallback для старых браузеров — грузим сразу
+    document.querySelectorAll('.img[data-bg]').forEach(function (el) {
+      el.style.backgroundImage = el.getAttribute('data-bg');
+    });
+    return;
+  }
+
+  var observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        var el = entry.target;
+        el.style.backgroundImage = el.getAttribute('data-bg');
+        observer.unobserve(el);
+      }
+    });
+  }, {
+    rootMargin: '200px 0px' // начинаем грузить за 200px до появления
+  });
+
+  document.querySelectorAll('.img[data-bg]').forEach(function (el) {
+    observer.observe(el);
+  });
+})();