#2161 oc.com lazy loading for images

addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig

@@ -4,7 +4,8 @@
         <a href="{{ adv.detail_url }}" class="text-dark">
             <div class="row{% if adv.doping != null %} doping_type4 {% endif %}">
                 <div class="col-md-2 justify-content-center align-self-center text-center border-right border-white">
-                    <img class="img-thumbnail" src="{{ adv.cover_photo }}" alt="{{ adv.name }}"
+                    <img class="img-thumbnail lazy" src="{{ img('visiosoft.theme.base::images/no-image.png').url }}"
+                         data-src="{{ adv.cover_photo }}" alt="{{ adv.name }}"
                          style="max-height:80px;">
                 </div>
                 <div class="col-md-7 justify-content-center align-self-center border-right border-white">

addons/default/visiosoft/base-theme/resources/js/lazy-loading.js

@@ -0,0 +1,64 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
+
+    if ("IntersectionObserver" in window) { // If intersection observer is supported
+        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    let lazyImage = entry.target;
+                    if (lazyImage.dataset.background) {
+                        console.log(123)
+                        lazyImage.style.backgroundImage = `url('${lazyImage.dataset.background}')`
+                    } else {
+                        lazyImage.src = lazyImage.dataset.src;
+                    }
+                    lazyImage.classList.remove("lazy");
+                    lazyImageObserver.unobserve(lazyImage);
+                }
+            });
+        });
+
+        lazyImages.forEach(function(lazyImage) {
+            lazyImageObserver.observe(lazyImage);
+        });
+    } else { // Fallback if intersection observer is not supported
+        let active = false;
+
+        const lazyLoad = function() {
+            if (active === false) {
+                active = true;
+
+                setTimeout(function() {
+                    lazyImages.forEach(function(lazyImage) {
+                        if ((lazyImage.getBoundingClientRect().top <= window.innerHeight
+                            && lazyImage.getBoundingClientRect().bottom >= 0)
+                            && getComputedStyle(lazyImage).display !== "none") {
+                            if (lazyImage.dataset.background) {
+                                lazyImage.style.backgroundImage = `url('${lazyImage.dataset.background}')`
+                            } else {
+                                lazyImage.src = lazyImage.dataset.src;
+                            }
+                            lazyImage.classList.remove("lazy");
+
+                            lazyImages = lazyImages.filter(function(image) {
+                                return image !== lazyImage;
+                            });
+
+                            if (lazyImages.length === 0) {
+                                document.removeEventListener("scroll", lazyLoad);
+                                window.removeEventListener("resize", lazyLoad);
+                                window.removeEventListener("orientationchange", lazyLoad);
+                            }
+                        }
+                    });
+
+                    active = false;
+                }, 200);
+            }
+        };
+
+        document.addEventListener("scroll", lazyLoad);
+        window.addEventListener("resize", lazyLoad);
+        window.addEventListener("orientationchange", lazyLoad);
+    }
+});

addons/default/visiosoft/base-theme/resources/views/partials/assets.twig

@@ -13,6 +13,7 @@
 {{ asset_add("theme.js", "visiosoft.theme.base::js/utils.js") }}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/phonefield.js") }}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/jquery.inputmask.bundle.min.js") }}
+{{ asset_add("theme.js", "visiosoft.theme.base::js/lazy-loading.js") }}
 
 {# Theme Scripts #}
 {#{{ asset_add("theme.js", "visiosoft.theme.base::js/plugins/*") }}#}