From f51b48b421902e6552bbc347cd264331e7eeb1f5 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Tue, 21 Apr 2020 17:52:19 +0100
Subject: [PATCH] PERF: Improve lazy-load performance in Safari

Safari starts loading images as soon as attributes are modified. Modern browsers all prefer the srcset attribute over src, so we should remove srcset last, and add it first.
---
 app/assets/javascripts/discourse/lib/lazy-load-images.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/lib/lazy-load-images.js b/app/assets/javascripts/discourse/lib/lazy-load-images.js
index a8f30a3998..f326b2ebf2 100644
--- a/app/assets/javascripts/discourse/lib/lazy-load-images.js
+++ b/app/assets/javascripts/discourse/lib/lazy-load-images.js
@@ -22,9 +22,10 @@ function hide(image) {
     height: image.height,
     className: image.className
   });
-  image.removeAttribute("srcset");
 
   image.src = image.dataset.smallUpload || LOADING_DATA;
+  image.removeAttribute("srcset");
+
   image.removeAttribute("data-small-upload");
 }
 
@@ -35,10 +36,10 @@ function show(image) {
   if (imageData) {
     const copyImg = new Image();
     copyImg.onload = () => {
-      image.src = copyImg.src;
       if (copyImg.srcset) {
         image.srcset = copyImg.srcset;
       }
+      image.src = copyImg.src;
       image.classList.remove("d-lazyload-hidden");
 
       if (image.onload) {
@@ -55,12 +56,12 @@ function show(image) {
       copyImg.onload = null;
     };
 
-    copyImg.src = imageData.src;
-
     if (imageData.srcset) {
       copyImg.srcset = imageData.srcset;
     }
 
+    copyImg.src = imageData.src;
+
     // width of image may not match, use computed style which
     // is the actual size of the image
     const computedStyle = window.getComputedStyle(image);