implement lazyloading

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

static/site.css

@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+    overflow-y: unset !important;
 }
 
 .masthead {

templates/head.html

@@ -28,6 +28,8 @@
 <meta property="og:url" content="{{ url_for(request.endpoint) }}" />
 <meta property="og:image" content="{{ conf['SITE_LOG_URL'] }}">
 
+<script defer src="/static/lazyload.js"></script>
+
 {{ conf['ADDITIONAL_HEADER_CONTENT'] | safe }}
 
 <script type="application/ld+json">

templates/index.html

@@ -12,12 +12,12 @@
   {% endif %}
 
 </head>
-<body>
+<body id="main_scrollable">
 <!-- NAVBAR -->
 {% include 'navbar.html' %}
 
 <!-- Site wellcome header -->
-<header class="masthead" style="background-image: url('{{ conf["WALLPAPER_URL"] }}');">
+<header class="masthead" realsrc='{{ conf["WALLPAPER_URL"] }}'>
   <div class="container h-50">
     <div class="row h-100 align-items-center">
         <div class="col-12 text-center">
@@ -41,7 +41,7 @@
       {% for card in mainLinks %}
       <div class="col-md-3">
         <div class="card mb-4 box-shadow border-0 hover-to-75">
-          <img class="card-img-top" src="{{ card['picture'] }}">
+          <img class="card-img-top" realsrc="{{ card['picture'] }}">
           <div class="card-img-overlay">
             <a href="{{ card['link'] }}" class="stretched-link"></a>
           </div>
@@ -70,7 +70,7 @@
 
       <div id="twitch-consent-placeholder" class="card bg-dark text-white">
          <img style="min-width: 80%; min-height: 200px;"
-            class="card-img" src="{{ conf['TWITCH_PLACEHOLDER_IMG'] }}" >
+            class="card-img" realsrc="{{ conf['TWITCH_PLACEHOLDER_IMG'] }}" >
         <div class="card-img-overlay">
           <label class="switch mt-3 mt-0-u440">
             <input id="toogle-twitch" class="custom-control-input"
@@ -117,7 +117,7 @@
     <div class="container text-color-special">
       <div class="row" {% if loop.index %2 == 1 %} style="flex-direction: row-reverse;" {% endif %}>
         <div class="mt-3 col image-min-dimensions">
-          <img class="img-responsive w-100" src="{{ section['picture'] }}">
+          <img class="img-responsive w-100" realsrc="{{ section['picture'] }}">
         </div>
         <div class="mt-3 col text-min-dimensions">
           <h1>{{ section['title'] }}</h1>

templates/navbar.html

@@ -54,7 +54,7 @@
       
     </div>
 </nav>
-<nav class="navbar navbar-dark bg-dark fake">
+<nav id="navbar-ph" class="navbar navbar-dark bg-dark fake">
   <li class="navbar-nav">
     <a class="nav-link" href="#">placeholder</a>
   </li>

templates/people.html

@@ -22,7 +22,7 @@
 		  </div>
 		<div class="col image-min-dimensions">
             <img class="img-responsive w-100 image-max-dimensions" 
-                 src="{{ p['image'] }}" alt="{{ p['title'] }}"></img>
+                 realsrc="{{ p['image'] }}" alt="{{ p['title'] }}"></img>
             	</div>
 		</div>
         {% endfor %}