diff options
| author | George Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2023-04-17 12:12:22 +0300 |
|---|---|---|
| committer | George Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2023-04-17 12:12:22 +0300 |
| commit | 68fc9e55e538e03f94509731ab41a0c8cf96710f (patch) | |
| tree | 3edb1e81864ac3eb35ba0fe8087ed24da1b812bf /public/assets/js/images | |
| parent | 84b2da85a1b452922dadb6a609533b9945afe51d (diff) | |
| download | classroom-68fc9e55e538e03f94509731ab41a0c8cf96710f.tar.gz classroom-68fc9e55e538e03f94509731ab41a0c8cf96710f.tar.bz2 classroom-68fc9e55e538e03f94509731ab41a0c8cf96710f.zip | |
setup a real server environment (apache DocumentRoot=/var/www/public)
Diffstat (limited to 'public/assets/js/images')
| -rw-r--r-- | public/assets/js/images/lazyload.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/public/assets/js/images/lazyload.js b/public/assets/js/images/lazyload.js new file mode 100644 index 0000000..4f954af --- /dev/null +++ b/public/assets/js/images/lazyload.js @@ -0,0 +1,61 @@ +$$plugins.define('lazyload', function (element, options) {
+ const plugin = this;
+ plugin.logger.debug("lazy loading");
+ const mutationObserver =
+ new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation, index) {
+ if (mutation.type === 'childList') {
+ mutation.addedNodes.forEach(update);
+ }
+ });
+ }),
+ observer =
+ new IntersectionObserver(function (entries, self) {
+ entries.forEach(function (entry) {
+ if (entry.isIntersecting) {
+ load(entry.target);
+ self.unobserve(entry.target);
+ }
+ });
+ }, options || {
+ rootMargin: '0px 0px 1250px 0px',
+ threshold: 0
+ }),
+ elms = element.querySelectorAll('.lazy');
+ elms.forEach(elm => observer.observe(elm));
+ mutationObserver.observe(element, { childList: true, subtree: true });
+
+ function update(element) {
+ if (!(element instanceof (HTMLElement))) {
+ return;
+ }
+ const container = element || document;
+ if (!container.querySelectorAll) {
+ return;
+ }
+ const elms = container.querySelectorAll('.lazy');
+ Array.prototype.forEach.call(elms, (elm) => !elm.getAttribute('data-loaded') && observer.observe(elm));
+ }
+
+ function load(elm) {
+ let i = 0, source, attr, picture = elm.parentElement, sources = picture.querySelectorAll('.lazysrcset');
+ if (sources.length) {
+ for (; i < sources.length; i++) {
+ source = sources[i];
+ attr = source.getAttribute('data-srcset');
+ if (attr) {
+ source.srcset = source.getAttribute('data-srcset');
+ }
+ }
+ }
+
+ if (!elm.getAttribute('data-loaded') && elm.getAttribute('data-src')) {
+ elm.src = elm.getAttribute('data-src');
+ elm.setAttribute('data-loaded', true);
+ }
+ }
+
+ return {
+ update: update
+ };
+});
\ No newline at end of file |