client/posts: skip thumbnail placeholder if fullsize image is in cache

client/js/controls/post_content_control.js

@@ -5,11 +5,12 @@ const views = require("../util/views.js");
 const optimizedResize = require("../util/optimized_resize.js");
 
 class PostContentControl {
-    constructor(hostNode, post, viewportSizeCalculator, fitFunctionOverride) {
+    constructor(hostNode, post, isMediaCached, viewportSizeCalculator, fitFunctionOverride) {
         this._post = post;
         this._viewportSizeCalculator = viewportSizeCalculator;
         this._hostNode = hostNode;
         this._template = views.getTemplate("post-content");
+        this._isMediaCached = isMediaCached;
 
         let fitMode = settings.get().fitMode;
         if (typeof fitFunctionOverride !== "undefined") {
@@ -150,9 +151,11 @@ class PostContentControl {
             newNode.firstElementChild.style.backgroundImage = "";
         }
         if (["image", "flash"].includes(this._post.type)) {
+            if (this._post.type !== "image" || !this._isMediaCached) {
                 newNode.firstElementChild.style.backgroundImage = "url("+this._post.originalThumbnailUrl+")";
             }
-        if (this._post.type == "image") {
+        }
+        if (this._post.type == "image" && !this._isMediaCached) {
             newNode.firstElementChild.addEventListener("load", load);
         } else if (settings.get().transparencyGrid) {
             newNode.classList.add("transparency-grid");

client/js/util/misc.js

@@ -211,6 +211,15 @@ function getPrettyName(tag) {
     return tag;
 }
 
+function isMediaCached(post) {
+    if (post.type !== "image") {
+        return false;
+    }
+    const img = new Image()
+    img.src = post.contentUrl;
+    return img.complete;
+}
+
 module.exports = {
     range: range,
     formatRelativeTime: formatRelativeTime,
@@ -229,4 +238,5 @@ module.exports = {
     escapeSearchTerm: escapeSearchTerm,
     dataURItoBlob: dataURItoBlob,
     getPrettyName: getPrettyName,
+    isMediaCached: isMediaCached,
 };

client/js/views/home_view.js

@@ -62,6 +62,7 @@ class HomeView {
             this._postContentControl = new PostContentControl(
                 this._postContainerNode,
                 postInfo.featuredPost,
+                misc.isMediaCached(postInfo.featuredPost),
                 () => {
                     return [window.innerWidth * 0.8, window.innerHeight * 0.7];
                 },

client/js/views/post_main_view.js

@@ -31,6 +31,7 @@ class PostMainView {
         this._postContentControl = new PostContentControl(
             postContainerNode,
             ctx.post,
+            misc.isMediaCached(ctx.post),
             () => {
                 const margin = sidebarNode.getBoundingClientRect().left;