Skip to content

Commit

Permalink
Lazy load - removed require and jquery
Browse files Browse the repository at this point in the history
  • Loading branch information
@olegnax
olegnax committed Aug 28, 2024
1 parent 1184398 commit d2dc1b6
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 58 deletions.
130 changes: 74 additions & 56 deletions view/frontend/templates/lazy.phtml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script type="text/javascript">
(function () {
function LazyLoad () {
function LazyLoad() {
this.settings = {
src: 'data-original',
srcset: 'data-originalset',
Expand All @@ -12,77 +12,95 @@
rootMargin: '0px',
threshold: 0,
debouncer: 500
}
this.images = document.querySelectorAll(this.settings.selector)
this.observer = null
let self = this
this.load = (event) => {
let image = event.target,
parent = image.parentElement
if (image.src == image.getAttribute(this.settings.src)) {
image.classList.remove(self.settings.selectorClass)
parent.classList.remove(self.settings.loadClass)
let _parent = parent.closest('.product-item-photo')
};
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)
_parent.classList.remove(self.settings.loadClass);
}
image.dispatchEvent(new Event(self.settings.loadEvent))
if (this.observer) {
this.observer.unobserve(image)

image.dispatchEvent(new Event(self.settings.loadEvent));
if (self.observer) {
self.observer.unobserve(image);
}
}
}
this.destroy = () => {
this.observer.disconnect()
}
this.applyImage = (image) => {
let src = image.getAttribute(self.settings.src),
srcset = image.getAttribute(self.settings.srcset)
if ('img' === image.tagName.toLowerCase()) {
image.onload = self.load
};

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
image.src = src;
}
if (srcset) {
image.srcset = srcset
image.srcset = srcset;
}
} else {
image.style.backgroundImage = 'url(\'' + src + '\')'
image.style.backgroundImage = 'url(\'' + src + '\')';
}
}
this.init = () => {
if (!window.IntersectionObserver) {
return
};

this.init = function() {
if (!('IntersectionObserver' in window)) {
return;
}

try {
this.observer = new IntersectionObserver(function (entries, observer) {
Array.prototype.forEach.call(entries, function (entry) {
self.observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
self.applyImage(entry.target)
self.applyImage(entry.target);
}
})
});
}, {
rootMargin: this.settings.rootMargin,
threshold: [this.settings.threshold]
})
Array.prototype.forEach.call(this.images, function (image) {
self.observer.observe(image)
})
rootMargin: self.settings.rootMargin,
threshold: [self.settings.threshold]
});

self.images.forEach(function(image) {
self.observer.observe(image);
});
} catch (e) {
console.info(e)
console.info(e);
}
}
this.init()
}
};

window.lazyLoad = function () {
return new LazyLoad()
this.init();
}
})()
document.addEventListener('DOMContentLoaded', function () {
lazyLoad()
}, false)
require(['jquery'], function ($) {
$(document.body).on('contentUpdated contentUpdated.oxlazy', lazyLoad)
})
</script>

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>
4 changes: 2 additions & 2 deletions view/frontend/templates/lazy_min.phtml
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<?php $scriptString = <<<script
!function(){function a(){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 a=this;this.load=e=>{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&&0<c.bottom&&b>c.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;
?>
<?php
if (isset($secureRenderer)){
echo /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false);
} else{
echo /* @noEscape */ '<script>' . $scriptString . '</script>';
}
}

0 comments on commit d2dc1b6

Please sign in to comment.