Merge pull request #468 from kfkitsune/thumbnail-lazyload-Intersectio…

…nObserver Thumbnail/Image Lazy Loading via Intersection Observer API
Weasyl · Aug 20, 2019 · a446650 · a446650
2 parents 019d0b6 + 8458ab2
commit a446650
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 39 deletions.
diff --git a/static/scripts.js b/static/scripts.js
@@ -10,34 +10,6 @@
 
     var csrfToken = document.documentElement.getAttribute('data-csrf-token');
 
-
-    // lazy load visible images
-    function loadLazyStuff() {
-        $('img.lazy').filter(':visible').each(function () {
-            this.src = this.getAttribute('data-src');
-        }).removeClass('lazy');
-    }
-
-    function debounce(func, threshold) {
-        var timeout;
-
-        return function debounced() {
-            var obj = this;
-            var args = arguments;
-
-            function delayed() {
-                func.apply(obj, args);
-                timeout = null;
-            }
-
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-
-            timeout = setTimeout(delayed, threshold || 100);
-        };
-    }
-
     function forEach(list, callback) {
         for (var i = 0, l = list.length; i < l; i++) {
             callback(list[i]);
@@ -180,9 +152,6 @@
 
 
     $(document).ready(function () {
-        // yes, we have js support
-        $('html').removeClass('no-js').addClass('js');
-
         // thumbnails
         // give enhanced layout to modern browsers
         if ('classList' in document.createElement('_') && typeof window.matchMedia === 'function') {
@@ -194,8 +163,6 @@
         }
 
         // call appropriate functions and plugins
-        loadLazyStuff();
-
         $('textarea.expanding').autosize();
 
         $('.tags-textarea')
@@ -524,8 +491,6 @@
         setTimeout(reportInputChanged);
     });
 
-    $(window).on('resize', debounce(loadLazyStuff));
-
     // all below plugins are under MIT licenses
 
     // expanding textareas
@@ -1608,7 +1573,6 @@
                 .children('.thumbnail-grid').addClass('current loaded');
 
             calculateThumbnailLayout();
-            loadLazyStuff();
 
             try {
                 localStorage['home-tab'] = paneId;

diff --git a/static/scripts/yall.min.js b/static/scripts/yall.min.js
diff --git a/templates/common/page_end.html b/templates/common/page_end.html
@@ -78,6 +78,15 @@ <h2 class="typeface-a color-a">Support</h2>
 <script src="/static/marked.js?${SHA}"></script>
 <script src="/static/scripts.js?${SHA}"></script>
 
+<script src="${CDNIFY('/static/scripts/yall.min.js')}"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    yall({
+      threshold: 100
+    });
+  });
+</script>
+
 $if options and "imageselect" in options:
   <script src="${CDNIFY('/static/scripts/imageselect/imageselect.js?' + SHA)}"></script>
   $:{RENDER("common/image_select.html", ["square_select" in options])}

diff --git a/templates/common/page_start.html b/templates/common/page_start.html
@@ -18,6 +18,12 @@
   $else:
     <title>Weasyl</title>
 
+  $# If we have JavaScript enabled, remove the no-js class; keep before any link/style elements
+  <script>
+    document.documentElement.classList.remove("no-js");
+    document.documentElement.classList.add("js");
+  </script>
+
   <link rel="stylesheet" href="/static/fonts/museo500.css" />
   <link rel="stylesheet" href="${resource_path('css/site.css')}" />
 

diff --git a/templates/common/thumbnail_grid_item.html b/templates/common/thumbnail_grid_item.html
@@ -51,11 +51,20 @@
         <img src="${avatar['display_url']}" alt="avatar" />
       $elif webp_thumb is not None:
         <picture>
-          <source type="image/webp" srcset="${webp_thumb['display_url']}" />
-          <img src="${display_url}" alt="" />
+          <source type="image/webp" data-srcset="${webp_thumb['display_url']}" />
+          <img class="lazy" data-src="${display_url}" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>" alt="" />
         </picture>
+        <noscript>
+          <picture>
+            <source type="image/webp" srcset="${webp_thumb['display_url']}" />
+            <img src="${display_url}" alt="" />
+          </picture>
+        </noscript>
       $else:
-        <img src="${display_url}" alt="" />
+        <img class="lazy" data-src="${display_url}" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>" />
+        <noscript>
+          <img src="${display_url}" />
+        </noscript>
     </a>
 
     $if playable and playable[0].get('file_type') == 'mp3':