implement lazyloading

2025-12-06 08:11:35 +01:00 · 2020-08-31 15:03:00 +02:00
parent ce074ecd1f
commit 23b275392f
6 changed files with 123 additions and 7 deletions
--- a/static/lazyload.js
+++ b/static/lazyload.js
@@ -0,0 +1,113 @@
+/* determine which size of image to load */
+function getSize(src){
+    var trueRes = screen.width/window.devicePixelRatio
+
+    if(src.indexOf("scale_fullscreen") > -1 || src.indexOf("wallpaper") > -1 ){
+        return '?scalex=' + trueRes
+    }
+
+    if(trueRes > 1920)
+        return '?scalex=640&scaley=480'
+    else if(trueRes <= 1920 && trueRes >= 1200)
+        return '?scalex=640&scaley=480'
+    else
+        return '?scalex=320&scaley=240'
+}
+
+/* check if browser is capable of webp */
+function supportsWebp() {
+    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
+    /* alternative to check for webP support */
+    //if (!self.createImageBitmap) return false;
+    //const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
+    //return createImageBitmap(webpData).then(() => true, () => false);
+}
+
+/* cache */
+var webP = supportsWebp()
+var elements = null
+var counter = 0
+
+/* garantuee initall call evaluates to true */
+var viewbox_y = -Infinity
+
+IDENT = "realsrc"
+
+/* function to load images */
+function changeSrc(offset){
+
+    /* check if there was a relevant change */
+    var cur_viewbox = -document.getElementById("navbar-ph").getBoundingClientRect().y
+    if(cur_viewbox - viewbox_y < 100){
+        return;
+
+    }
+
+    /* cache viewbox */
+    viewbox_y = cur_viewbox
+
+    /* cache */
+    if(elements == null){
+        elements = document.querySelectorAll("*[" + IDENT + "]");
+    }
+
+    for (var i = counter; i < elements.length; i++) {
+            var boundingClientRect = elements[i].getBoundingClientRect();
+            if (elements[i].hasAttribute(IDENT)
+                    && boundingClientRect.top < window.innerHeight + offset) {
+
+                var newSrc = elements[i].getAttribute(IDENT)
+                if(!newSrc){
+                    console.log(elements[i])
+                }
+                /* remove url( ... ) */
+                //newSrc = newSrc.substring(4,newSrc.length-1)
+
+                if(newSrc.indexOf(".jpg") > -1 
+                        || newSrc.indexOf(".png") > -1
+                        || newSrc.indexOf(".jpeg") > -1){
+                    /* get correct size */
+                    newSrc += getSize(newSrc)
+
+                    /* load webP if supported */
+                    if(webP){
+                        newSrc += '&encoding=webp'
+                    }
+                }else{
+                    /* continue for other formats like svg */
+                    elements[i].removeAttribute(IDENT);
+                    elements[i].setAttribute("src", newSrc);
+                    /* do not set bgImg for these formats */
+                    continue;
+                }
+                elements[i].setAttribute("src", newSrc);
+                if(newSrc.indexOf("wallpaper") > -1){
+                    elements[i].style.backgroundImage = 'url(' + newSrc +')';
+                }
+                elements[i].removeAttribute(IDENT);
+            }else{
+                /* DOM is parsed top down and images are inserted in that order too */
+                /* meaing that once we reach pic that insnt in viewbox none following will be*/
+                counter = i;
+                return;
+            }
+        }
+
+    /* if we got here we are done */
+    window.removeEventListener("scroll",refresh_handler);
+    console.log("Listener finished & removed")
+
+}
+var refresh_handler = function(e) {
+    /* images directly in view first (offset 0)*/
+    //changeSrc(0)
+    /* then load images almost in view */
+    changeSrc(500)
+};
+
+/* add listeners */
+ms = document.getElementById("main_scrollable")
+window.addEventListener('scroll', refresh_handler);
+window.addEventListener('resize', refresh_handler);
+window.addEventListener('load', refresh_handler);