diff --git a/docs/en/docs/css/custom.css b/docs/en/docs/css/custom.css index b192f6123..a38df772f 100644 --- a/docs/en/docs/css/custom.css +++ b/docs/en/docs/css/custom.css @@ -102,7 +102,15 @@ a.announce-link:hover { align-items: center; } -.announce-wrapper div.item { +.announce-wrapper #announce-left div.item { + display: none; +} + +.announce-wrapper #announce-right { + display: none; +} + +.announce-wrapper #announce-right div.item { display: none; } @@ -112,7 +120,7 @@ a.announce-link:hover { top: -10px; right: 0; font-size: 0.5rem; - color: #999; + color: #e6e6e6; background-color: #666; border-radius: 10px; padding: 0 10px; diff --git a/docs/en/docs/js/custom.js b/docs/en/docs/js/custom.js index 425b7fce7..48e95901d 100644 --- a/docs/en/docs/js/custom.js +++ b/docs/en/docs/js/custom.js @@ -135,28 +135,43 @@ async function showRandomAnnouncement(groupId, timeInterval) { } } -function hideSponsorOnImageError() { - const sponsorImages = document.querySelectorAll('.sponsor-image'); +function handleSponsorImages() { const announceRight = document.getElementById('announce-right'); + if(!announceRight) return; - function hideAnnounceRight() { - if (announceRight) { - announceRight.style.display = 'none'; - } - } + const sponsorImages = document.querySelectorAll('.sponsor-image'); - sponsorImages.forEach(function(img) { - img.addEventListener('error', function() { - hideAnnounceRight(); + const imagePromises = Array.from(sponsorImages).map(img => { + return new Promise((resolve, reject) => { + if (img.complete && img.naturalHeight !== 0) { + resolve(); + } else { + img.addEventListener('load', () => { + if (img.naturalHeight !== 0) { + resolve(); + } else { + reject(); + } + }); + img.addEventListener('error', reject); + } }); }); + + Promise.all(imagePromises) + .then(() => { + announceRight.style.display = 'block'; + showRandomAnnouncement('announce-right', 10000); + }) + .catch(() => { + // do nothing + }); } async function main() { setupTermynal(); showRandomAnnouncement('announce-left', 5000) - showRandomAnnouncement('announce-right', 10000) - hideSponsorOnImageError(); + handleSponsorImages(); } document$.subscribe(() => { main()