From d2dc1b6dcb2c8691cacd31b9eaac45421ae458c0 Mon Sep 17 00:00:00 2001 From: Oleg Kostyuk Date: Wed, 28 Aug 2024 03:14:06 +0300 Subject: [PATCH] Lazy load - removed require and jquery --- view/frontend/templates/lazy.phtml | 130 ++++++++++++++----------- view/frontend/templates/lazy_min.phtml | 4 +- 2 files changed, 76 insertions(+), 58 deletions(-) diff --git a/view/frontend/templates/lazy.phtml b/view/frontend/templates/lazy.phtml index dd4a91f..a0fe5be 100644 --- a/view/frontend/templates/lazy.phtml +++ b/view/frontend/templates/lazy.phtml @@ -1,6 +1,6 @@ \ No newline at end of file + + window.lazyLoad = function() { + return new LazyLoad(); + }; + })(); + + document.addEventListener('DOMContentLoaded', function() { + lazyLoad(); + }); + + document.body.addEventListener('contentUpdated', function() { + lazyLoad(); + }); + document.body.addEventListener('contentUpdated.oxlazy', function() { + lazyLoad(); + }); + diff --git a/view/frontend/templates/lazy_min.phtml b/view/frontend/templates/lazy_min.phtml index d4e6e91..b75caf4 100644 --- a/view/frontend/templates/lazy_min.phtml +++ b/view/frontend/templates/lazy_min.phtml @@ -1,5 +1,5 @@ {let b=e.target,c=b.parentElement;if(b.src==b.getAttribute(this.settings.src)){b.classList.remove(a.settings.selectorClass),c.classList.remove(a.settings.loadClass);let d=c.closest(".product-item-photo");d&&d.classList.remove(a.settings.loadClass),b.dispatchEvent(new Event(a.settings.loadEvent)),this.observer&&this.observer.unobserve(b)}},this.destroy=()=>{this.observer.disconnect()},this.oldLoadImages=()=>{if(!this.settings)return;let b=function(a,b){var c;return function(){var d=this,e=arguments;clearTimeout(c),c=setTimeout(function(){a.apply(d,Array.prototype.slice.call(e))},b)}};window.addEventListener("scroll",b(a.oldInit,a.settings.debouncer)),window.addEventListener("resize",b(a.oldInit,a.settings.debouncer)),a.oldInit()},this.oldInit=()=>{let b=window.visualViewport?window.visualViewport.height:window.innerHeight;Array.prototype.forEach.call(this.images,function(d){if(d.classList.contains(a.settings.selectorClass)){let c=d.getBoundingClientRect();c.top!=c.bottom&&0c.top&&a.applyImage(d)}})},this.applyImage=b=>{let c=b.getAttribute(a.settings.src),d=b.getAttribute(a.settings.srcset);"img"===b.tagName.toLowerCase()?(b.onload=a.load,c&&(b.src=c),d&&(b.srcset=d)):b.style.backgroundImage="url('"+c+"')"},this.init=()=>{if(!window.IntersectionObserver){this.oldLoadImages();return}try{this.observer=new IntersectionObserver(function(b,c){Array.prototype.forEach.call(b,function(b){b.isIntersecting&&a.applyImage(b.target)})},{rootMargin:this.settings.rootMargin,threshold:[this.settings.threshold]}),Array.prototype.forEach.call(this.images,function(b){a.observer.observe(b)})}catch(b){console.info(b),this.oldLoadImages()}},this.init()}window.lazyLoad=function(){return new a}}(),document.addEventListener("DOMContentLoaded",function(){lazyLoad()},!1),require(["jquery"],function(a){a(document.body).on("contentUpdated contentUpdated.oxlazy",lazyLoad)}) +(function (){ function LazyLoad(){ this.settings={ src: 'data-original', srcset: 'data-originalset', selector: '.lazy', selectorClass: 'lazy', loadClass: 'lazy-loader', loadEvent: 'lazyLoaded.oxlazy', root: null, rootMargin: '0px', threshold: 0, debouncer: 500}; this.images=document.querySelectorAll(this.settings.selector); this.observer=null; let self=this; this.load=function(event){ let image=event.target; let parent=image.parentElement; if (image.src===image.getAttribute(self.settings.src)){ image.classList.remove(self.settings.selectorClass); parent.classList.remove(self.settings.loadClass); let _parent=parent.closest('.product-item-photo'); if (_parent){ _parent.classList.remove(self.settings.loadClass);} image.dispatchEvent(new Event(self.settings.loadEvent)); if (self.observer){ self.observer.unobserve(image);}}}; this.destroy=function(){ if (self.observer){ self.observer.disconnect();}}; this.applyImage=function(image){ let src=image.getAttribute(self.settings.src); let srcset=image.getAttribute(self.settings.srcset); if (image.tagName.toLowerCase()==='img'){ image.onload=self.load; if (src){ image.src=src;} if (srcset){ image.srcset=srcset;}} else{ image.style.backgroundImage='url(\'' + src + '\')';}}; this.init=function(){ if (!('IntersectionObserver' in window)){ return;} try{ self.observer=new IntersectionObserver(function(entries){ entries.forEach(function(entry){ if (entry.isIntersecting){ self.applyImage(entry.target);}});},{ rootMargin: self.settings.rootMargin, threshold: [self.settings.threshold]}); self.images.forEach(function(image){ self.observer.observe(image);});} catch (e){ console.info(e);}}; this.init();} window.lazyLoad=function(){ return new LazyLoad();};})(); document.addEventListener('DOMContentLoaded', function(){ lazyLoad();}); document.body.addEventListener('contentUpdated', function(){ lazyLoad();}); document.body.addEventListener('contentUpdated.oxlazy', function(){ lazyLoad();}); script; ?> renderTag('script', [], $scriptString, false); } else{ echo /* @noEscape */ ''; -} +} \ No newline at end of file