mrmo/caf-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix achievements marquee collapsing to blank on slow loads

Browse Source 
Add explicit width/height attributes to every marquee image so the browser reserves the correct aspect-ratio box immediately from HTML parse time, instead of waiting for each image's bytes to arrive. Previously (CSS height:260px;width:auto only) any image not yet fully downloaded rendered at ~0 width, making the animated track look like one image followed by a large empty gap until everything finished loading.
This commit is contained in:
Line INK
2026-08-27 22:13:10 +03:00
parent f7fa565580
commit 02652424df
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -648,24 +648,24 @@
</div> </div>
<div class="achv-marquee"> <div class="achv-marquee">
<div class="achv-track"> <div class="achv-track">
<img src="images/achievements/1.webp" alt="بطولة المملكة المفتوحة 2025 — المركز الأول"> <img src="images/achievements/1.webp" width="1280" height="1600" alt="بطولة المملكة المفتوحة 2025 — المركز الأول">
<img src="images/achievements/2.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/2.webp" width="1280" height="1600" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/3.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/3.webp" width="1280" height="1600" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/4.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/4.webp" width="922" height="1152" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/5.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/5.webp" width="922" height="1152" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/6.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/6.webp" width="1408" height="768" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/7.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/7.webp" width="768" height="1029" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/8.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/8.webp" width="896" height="860" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/9.webp" alt="من إنجازات أكاديمية الكاف الرياضية"> <img src="images/achievements/9.webp" width="768" height="1137" alt="من إنجازات أكاديمية الكاف الرياضية">
<img src="images/achievements/1.webp" alt="بطولة المملكة المفتوحة 2025 — المركز الأول" aria-hidden="true"> <img src="images/achievements/1.webp" width="1280" height="1600" alt="بطولة المملكة المفتوحة 2025 — المركز الأول" aria-hidden="true">
<img src="images/achievements/2.webp" alt="" aria-hidden="true"> <img src="images/achievements/2.webp" width="1280" height="1600" alt="" aria-hidden="true">
<img src="images/achievements/3.webp" alt="" aria-hidden="true"> <img src="images/achievements/3.webp" width="1280" height="1600" alt="" aria-hidden="true">
<img src="images/achievements/4.webp" alt="" aria-hidden="true"> <img src="images/achievements/4.webp" width="922" height="1152" alt="" aria-hidden="true">
<img src="images/achievements/5.webp" alt="" aria-hidden="true"> <img src="images/achievements/5.webp" width="922" height="1152" alt="" aria-hidden="true">
<img src="images/achievements/6.webp" alt="" aria-hidden="true"> <img src="images/achievements/6.webp" width="1408" height="768" alt="" aria-hidden="true">
<img src="images/achievements/7.webp" alt="" aria-hidden="true"> <img src="images/achievements/7.webp" width="768" height="1029" alt="" aria-hidden="true">
<img src="images/achievements/8.webp" alt="" aria-hidden="true"> <img src="images/achievements/8.webp" width="896" height="860" alt="" aria-hidden="true">
<img src="images/achievements/9.webp" alt="" aria-hidden="true"> <img src="images/achievements/9.webp" width="768" height="1137" alt="" aria-hidden="true">
</div> </div>
</div> </div>
</div> </div>