feat(Post): cancel image HTTP request when unloading

Rule-34 · Jul 29, 2022 · d30d5ec · d30d5ec
1 parent cc50b9c
commit d30d5ec
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -22,6 +22,7 @@
         >
           <img
             :key="mediaFile[0].url"
+            ref="imageElement"
             :alt="'Image ' + post.data.id"
             :class="{
               'opacity-100': media.hasLoaded,
@@ -458,6 +459,19 @@ export default {
     }
   },
 
+  beforeDestroy() {
+
+    // Cancel any pending HTTP requests
+    if (this.isImage) {
+      const imageElement = this.$refs['imageElement']
+
+      if (imageElement) {
+        // TODO: This trick only works in Chrome
+        imageElement.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+        imageElement.onload = null
+        imageElement.onerror = null
+      }
+    }
   },