Load the page logo using the `eager` policy

Using `loading="lazy"` for the page logo causes the image to flicker noticeably in Safari on both macOS and iOS.

See https://www.woltlab.com/community/thread/295403-logo-auf-der-startseite-beim-aktualisieren-ein-rechteck/

diff --git a/com.woltlab.wcf/templates/pageHeaderLogo.tpl b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
index 544038c49281ef73f5ba6469687f94dbf12a3c62..8afd6a05dc48f85f8c9a89cc3b661d06523d3c45 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderLogo.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
@@ -5,11 +5,11 @@
                <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="" class="pageHeaderLogoLarge"{*
                        *}{if $__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoHeight')} height="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoHeight')}"{/if}{*
                        *}{if $__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoWidth')} width="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoWidth')}"{/if}{*
-                       *} loading="lazy">
+                       *} loading="eager">
                <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogoMobile()}" alt="" class="pageHeaderLogoSmall"{*
                        *}{if $__wcf->getStyleHandler()->getStyle()->getPageLogoSmallHeight()} height="{@$__wcf->getStyleHandler()->getStyle()->getPageLogoSmallHeight()}"{/if}{*
                        *}{if $__wcf->getStyleHandler()->getStyle()->getPageLogoSmallWidth()} width="{@$__wcf->getStyleHandler()->getStyle()->getPageLogoSmallWidth()}"{/if}{*
-                       *} loading="lazy">
+                       *} loading="eager">
                
                {event name='headerLogo'}
        </a>

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl b/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
index e02d11e74da04206308567aed6f76f706a6dd170..07cc050ea094ab8804e421f6e353d9ecf483966b 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
@@ -1,6 +1,6 @@
 <div id="pageHeaderLogo" class="pageHeaderLogo">
        <a href="{link}{/link}">
-               <img src="{@$__wcf->getPath()}acp/images/woltlabSuite.png" alt="" width="562" height="80" loading="lazy" class="pageHeaderLogoLarge">
-               <img src="{@$__wcf->getPath()}acp/images/woltlabSuite-small.png" alt="" width="55" height="30" loading="lazy" class="pageHeaderLogoSmall">
+               <img src="{@$__wcf->getPath()}acp/images/woltlabSuite.png" alt="" width="562" height="80" loading="eager" class="pageHeaderLogoLarge">
+               <img src="{@$__wcf->getPath()}acp/images/woltlabSuite-small.png" alt="" width="55" height="30" loading="eager" class="pageHeaderLogoSmall">
        </a>
 </div>
\ No newline at end of file