hotstovejer/openclassify
0
0
Fork 0
mirror of https://github.com/openclassify/openclassify.git synced 2026-01-11 18:01:10 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

#2161 oc.com lazy loading for images

Browse Source
This commit is contained in:
Diatrex 2020-09-28 15:37:04 +03:00
parent 0ce72564c4
commit 471e426caf
3 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

64
addons/default/visiosoft/base-theme/resources/js/lazy-loading.js Normal file
View File

@ -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);
}
});

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

@ -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/*") }}#}