Reponsive images are now loaded on demand

Signed-off-by: Jim Martens <github@2martens.de>

_includes/head.html

@@ -19,5 +19,13 @@
             integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
             crossorigin="anonymous"></script>
     {% asset main.js %}
+    {% asset echo.js %}
+    <script defer>
+        echo.init({
+            offset: 500,
+            throttle: 250,
+            unload: false
+        });
+    </script>
     {% asset fontawesome-all.js defer %}
 </head>

_includes/image.html

@@ -1,3 +1,4 @@
 <img alt="{{ include.alt }}"
-     src="{% if site.data.cdn.use %}{{ site.data.cdn.url }}{% else %}{{ site.baseurl }}{% endif %}{{ include.link }}"
+     src=""
+     data-echo="{% if site.data.cdn.use %}{{ site.data.cdn.url }}{% else %}{{ site.baseurl }}{% endif %}{{ include.link }}"
      class="img-fluid" />