diff --git a/webui/src/util/xywh.ts b/webui/src/util/xywh.ts
index 72399be..db6c29d 100644
--- a/webui/src/util/xywh.ts
+++ b/webui/src/util/xywh.ts
@@ -47,16 +47,19 @@ export function xywh(mediaItem: HTMLImageElement | HTMLVideoElement) {
  * original width and height.
  */
 function addImageLoadListener(mediaFragment: MediaFragment) {
+  // Base64-encoded transparent 1x1 pixel GIF
+  const TRANSPARENT_GIF =
+    "data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
   const mediaItem = mediaFragment.mediaItem;
   const onload = function () {
-    applyFragment(mediaFragment);
-    // Removes the load listener from  the image, so that it doesn't fire
-    // again when we set the image's @src to a transparent 1x1 GIF, but only
-    // once when the initial image has fully loaded
-    mediaItem.removeEventListener("load", onload);
-    // Base64-encoded transparent 1x1 pixel GIF
-    mediaItem.src =
-      "data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+    // Prevent onload firing when the 1x1 pixel GIF loads; but still react when `src`
+    // is changed programatically.
+    if (mediaItem.src !== TRANSPARENT_GIF) {
+      // Required on reloads because of size calculations.
+      mediaItem.style.cssText = "";
+      applyFragment(mediaFragment);
+      mediaItem.src = TRANSPARENT_GIF;
+    }
   };
   mediaItem.addEventListener("load", onload);
 }