From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 8 May 2022 11:54:02 +0000 (+0200)
Subject: Lazy loading the user’s avatar causes flashes
X-Git-Tag: 5.5.0_Beta_1~9
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=04e04bfb15597a05fdfd814df4efd1b599fe6073;p=GitHub%2FWoltLab%2FWCF.git

Lazy loading the user’s avatar causes flashes

Safari (macOS and iOS) does not handle lazy loaded images above the fold gracefully. This causes the user’s avatar to flicker noticeably on ever page navigation.
---

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 1c02dc3d27..d7650b054e 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -1,6 +1,6 @@
 <nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
 	{if $__wcf->user->userID}
-		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</span>
+		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)}</span>
 	{else}
 		<a href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}" class="userPanelLoginLink jsTooltip" title="{lang}wcf.user.loginOrRegister{/lang}">
 			<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
@@ -20,7 +20,7 @@
 					aria-haspopup="true"
 					aria-expanded="false"
 				>
-					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span>
+					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)} <span>{lang}wcf.user.userNote{/lang}</span>
 				</a>
 				<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
 					<div class="userMenuHeader">
diff --git a/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php b/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
index 21649bc0e0..e1ed7be854 100644
--- a/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
+++ b/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
@@ -57,9 +57,9 @@ final class AvatarDecorator implements IUserAvatar, ISafeFormatAvatar
     /**
      * @inheritDoc
      */
-    public function getImageTag($size = null)
+    public function getImageTag($size = null, bool $lazyLoading = true)
     {
-        return $this->avatar->getImageTag($size);
+        return $this->avatar->getImageTag($size, $lazyLoading);
     }
 
     /**
diff --git a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
index 616c56e1b2..33f36a292d 100644
--- a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
+++ b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
@@ -113,9 +113,15 @@ class UserAvatar extends DatabaseObject implements IUserAvatar, ISafeFormatAvata
     /**
      * @inheritDoc
      */
-    public function getImageTag($size = null)
+    public function getImageTag($size = null, bool $lazyLoading = true)
     {
-        return '<img src="' . StringUtil::encodeHTML($this->getURL($size)) . '" width="' . $size . '" height="' . $size . '" alt="" class="userAvatarImage" loading="lazy">';
+        return \sprintf(
+            '<img src="%s" width="%d" height="%d" alt="" class="userAvatarImage" loading="%s">',
+            StringUtil::encodeHTML($this->getURL($size)),
+            $size,
+            $size,
+            $lazyLoading ? 'lazy' : 'eager'
+        );
     }
 
     /**