diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig index 6b1a34ed6..2a26c3a9c 100644 --- a/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig +++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig @@ -4,7 +4,8 @@
- {{ adv.name }}
diff --git a/addons/default/visiosoft/base-theme/resources/js/lazy-loading.js b/addons/default/visiosoft/base-theme/resources/js/lazy-loading.js new file mode 100644 index 000000000..866480c7d --- /dev/null +++ b/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); + } +}); \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig b/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig index e623a9d63..d2df4bce3 100644 --- a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig +++ b/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/*") }}#}