Use Picture element to automatically choose webp

Remove loadOnView function as has to be remade for new picture element
Remove broken way of checking for Webp support

onlylegs/static/js/index.js

@@ -5,26 +5,8 @@ function imgFade(obj, time = 200) {
 
     setTimeout(() => { obj.style.animation = null; }, time);
 }
-// Lazy load images when they are in view
-function loadOnView() {
-    const lazyLoad = document.querySelectorAll('#lazy-load');
-    const webpSupport = checkWebpSupport();
-
-    for (let i = 0; i < lazyLoad.length; i++) {
-        const image = lazyLoad[i];
-        if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
-            if (!image.src && webpSupport) {
-                image.src = `${image.getAttribute('data-src')}&e=webp`;
-            } else if (!image.src) {
-                image.src = image.getAttribute('data-src');
-            }
-        }
-    }
-}
 
 window.onload = function () {
-    loadOnView();
-
     const times = document.querySelectorAll('.time');
     for (let i = 0; i < times.length; i++) {
         // Remove milliseconds
@@ -70,8 +52,6 @@ window.onload = function () {
     }
 };
 window.onscroll = function () {
-    loadOnView();
-
     // Top Of Page button
     const topOfPage = document.querySelector('.top-of-page');
     if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
@@ -90,6 +70,3 @@ window.onscroll = function () {
         }
     }
 };
-window.onresize = function () {
-    loadOnView();
-};

onlylegs/static/js/webp.js

@@ -1,10 +0,0 @@
-function checkWebpSupport() {
-    let webpSupport = false;
-    try {
-        webpSupport = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
-    } catch (e) {
-        webpSupport = false;
-    }
-
-    return webpSupport;
-}

onlylegs/static/sass/components/image-view/image.sass

@@ -1,4 +1,4 @@
-.image-container
+.image-container, picture
     margin: auto
 
     width: 100%
@@ -20,7 +20,7 @@
         object-position: center
 
 @media (max-width: 1100px)
-    .image-container
+    .image-container, picture
         margin: 0 auto
         max-height: 69vh
 

onlylegs/static/sass/components/settings.sass

@@ -26,4 +26,4 @@
         padding: 0
 
         font-size: 1.25rem
-        font-weight: 700
+        font-weight: 700