lazy loading background image

homepage/cwsvJudo/Makefile.heliohost

@@ -55,6 +55,9 @@ installDependencies:
 # - google material icons
 	if [ ! -d "submodules/material-design-icons" ]; then cd submodules; git clone --filter=tree:0 https://github.com/google/material-design-icons.git; fi
 	cd submodules/material-design-icons; git fetch; git checkout $(VERSION_GOOGLE_MATERIAL_ICONS);
+# - lazyload (load small sized placeholder image before loading large full quality image)
+	if [ ! -d "submodules/lazysizes" ]; then cd submodules git clone https://github.com/aFarkas/lazysizes.git; fi
+	cd submodules/lazysizes; git checkout $(VERSION_LAZYSIZES)
 
 
 # copy/link all together to get a "distributable" package
@@ -74,6 +77,8 @@ dist: all
 	$(LN) ./submodules/materialize/dist/css/materialize.min.css     $(distDir)/httpdocs/ressourcen/css/
 	$(LN) ./submodules/materialize/dist/css/materialize.min.css.map $(distDir)/httpdocs/ressourcen/css/
 	$(LN) ./submodules/materialize/dist/js/materialize.min.js       $(distDir)/httpdocs/ressourcen/js/
+# - lazysizes
+	$(LN) ./submodules/lazysizes/lazysizes.min.js                   $(distDir)/httpdocs/ressourcen/js/
 
 # page data
 	mkdir -p $(distDir)/httpdocs/pages/responsive

homepage/cwsvJudo/Makefile.heliohost.config

@@ -8,6 +8,8 @@ pandocTemplate = pandocTemplate/materialize-parallax.pandocTemplate
 VERSION_MATERIALIZE = v2.1.1
 # version of google material icons to use
 VERSION_GOOGLE_MATERIAL_ICONS = 4.0.0
+# version for lazysizes
+VERSION_LAZYSIZES = 5.3.1
 
 # where to put the distribution
 distDir = ./build/dist/heliohost

homepage/cwsvJudo/src/pages/test/index.php

@@ -92,15 +92,22 @@ $wallpapers = [
     </header>
 
     <main>
+        <script>
+            function postload(t){
+                if(t.src !== t.getAttribute('data-src')){
+                    t.src = t.getAttribute('data-src');
+                }
+            }
+        </script>
 <?php
         foreach($sections as $idx => $section){
             echo(
                 '<div class="parallax-container">'
                     .'<div class="parallax">'
-                        .'<img '
+                        .'<img'
-                            .'src="'.$wallpapers[$idx]['src'].'" '
+                        . ' class="lazyload" '
-                            // .'data-src="'.$wallpapers[$idx]['data-src'].'" '
+                        . ' src="'.$wallpapers[$idx]['src'].'" '                            
-                            // .'onload="if(this.src !== this.getAttribute(\'data-src\')) this.src=this.getAttribute(\'data-src\');'
+                        . ' data-src="'.$wallpapers[$idx]['data-src'].'" '
                         .'>'
                     .'</div>'
                 .'</div>'
@@ -114,6 +121,7 @@ $wallpapers = [
 
     <!--JavaScript at end of body for optimized loading-->
     <script type="text/javascript" src="/ressourcen/js/materialize.min.js"></script>
+    <script type="text/javascript" src="/ressourcen/js/lazysizes.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const elems = document.querySelectorAll('.parallax');