Improve thumbnail loading, replace broken images with generic thunbnail

lib/Thumbnail.lib.php

@@ -82,7 +82,7 @@ class Thumbnail {
         $path = "cache/thumb/$encodedfilename.$width.jpg";
         $image = self::getThumbnailFromUrl($url, $width, $height);
         file_put_contents(__DIR__ . "/../$path", $image);
-        echo $path;
+        
         return $image;
     }
 

pages/home.php

@@ -5,6 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+header("Link: <static/img/news-placeholder.svg>; rel=preload; as=image", false);
+
 $weatherclass = "Weather_" . $SETTINGS['sources']['weather'];
 $weather = new $weatherclass(46.595, -112.027); // TODO: get user location
 $weather->loadForecast();
@@ -128,10 +130,26 @@ foreach ($newsitems as $item) {
             break;
         }
         $count++;
-        echo $item->generateGridCard(false);
+        echo $item->generateGridCard(true);
     }
     ?>
 
     <div class="col-1 sizer-element"></div>
 
-</div>
+</div>
+
+
+<script nonce="<?php echo $SECURE_NONCE; ?>">
+    var preload_images = <?php
+    $srcs = [];
+    foreach ($itemsbycategory["general"] as $item) {
+        if (strpos($item->getImage(), "preview.redd.it") !== false) {
+            $imgurl = $item->getImage();
+        } else {
+            $imgurl = Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
+        }
+        $srcs[] = $imgurl;
+    }
+    echo json_encode($srcs);
+    ?>;
+</script>

pages/news.php

@@ -3,6 +3,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+header("Link: <static/img/news-placeholder.svg>; rel=preload; as=image", false);
+
 News::load($SETTINGS["sources"]["news"]);
 
 $newsitems = News::getItems();
@@ -39,3 +41,19 @@ $newsitems = News::getItems();
     <div class="col-1 sizer-element"></div>
 
 </div>
+
+
+<script nonce="<?php echo $SECURE_NONCE; ?>">
+    var preload_images = <?php
+    $srcs = [];
+    foreach ($newsitems as $item) {
+        if (strpos($item->getImage(), "preview.redd.it") !== false) {
+            $imgurl = $item->getImage();
+        } else {
+            $imgurl = Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
+        }
+        $srcs[$item->getCategory()->toString()][] = $imgurl;
+    }
+    echo json_encode($srcs);
+    ?>;
+</script>

static/js/home.js

@@ -3,3 +3,23 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
+
+function loadPreloadedImage(index) {
+    console.log("Loading cached image ", preload_images[index]);
+    $("img.newscard-img[data-src=\"" + preload_images[index] + "\"]").attr("src", preload_images[index]);
+}
+
+// Load images into cache and replace placeholders
+$(document).ready(function () {
+    if (typeof preload_images != "undefined") {
+        var preloadCache = [];
+        for (var i = 0; i < preload_images.length; i++) {
+            console.log("Caching thumbnail: " + preload_images[i]);
+            img = new Image();
+            img.src = preload_images[i];
+            img.onload = loadPreloadedImage(i);
+            preloadCache.push(img);
+        }
+    }
+});

static/js/news.js

@@ -19,4 +19,7 @@ $("input[name=newscategory]").on("change", function () {
 });
 
 window.shuffleInstance.filter("general");
-setTimeout(fetchVisibleGridImages, 500);
+
+$(document).ready(function () {
+    fetchVisibleGridImages();
+});

static/js/newsgrid.js

@@ -15,4 +15,9 @@ setInterval(function () {
 
 // Show the images using JavaScript, to make sure we don't see double
 // when JS is disabled
-$("img.newscard-img.d-none").removeClass("d-none");
+$("img.newscard-img.d-none").removeClass("d-none");
+
+
+$("img.newscard-img").on("error", function () {
+    $(this).attr("src", "static/img/news-placeholder.svg");
+});