I’m currently developing a web application where users can access certain links after a countdown timer expires. During this waiting period, I’d like to display Yllix ads to make the experience more engaging & to make some $$. However, I’ve encountered a challenge in optimizing the performance of loading my web pages because these ads load even if they are hidden {display:none;} giving a laggy bad experience impression to my users. What i want exactly is loading these ads only if the countdown timer is triggered, otherwise it shouldn’t be loaded in background. Well i asked ChatGPT and Copilot both of them gave me dynamic executing solution but all of these methods not excuting the internal documents of the Ad Units i think because the yllix Ad units only load if they are place in pure html.
My attempt to dynamically append the Yllix ads without success indicates a potential limitation with Yllix’s implementation. Is there a workaround or alternative approach to achieve this? I’m open to any suggestions or insights on how to seamlessly integrate Yllix ads into my countdown timer functionality. And just a Note: i can’t use Adsens please don’t ask me to switch to other Ad Networks. Thank you in advance for your help.
Here’s my ylixx Ad Unite (300×250 Banner):

<!--bannerAd-->
<script type="text/javascript" src="https://udbaa.com/bnr.php?section=dlAds&pub=452969&format=300x250&ga=g"></script>
<noscript><a href="https://yllix.com/publishers/452969" target="_blank"><img src="//ylx-aff.advertica-cdn.com/pub/300x250.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" alt="ylliX - Online Advertising Network" /></a></noscript>

Here’s a simplified version of my countDown web app:

document.addEventListener('DOMContentLoaded', function() {
const countdownOverlay = document.getElementById('countDownOverlay');
const countdownMessage = document.getElementById('countDownBlock');
const countdownElement = document.getElementById('countdown');

const links = document.querySelectorAll('.googledrive, .mega, .megaup, .torrent');
let currentLink = null;

// Event listener to handle link clicks
links.forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        if (currentLink === null) {
            currentLink = this;
            lockLink(this);
            startCountdown(this.href);
            this.classList.add('unlocked');
        } else if (this === currentLink) {
            window.open(this.href, '_blank');
            currentLink = null;
            this.classList.remove('unlocked');
        }
    });
});

function lockLink(link) {
    link.classList.add('locked');
    link.setAttribute('disabled', 'disabled');
}

function unlockLink() {
    if (currentLink) {
        currentLink.classList.remove('locked');
        currentLink.removeAttribute('disabled');
    }
}

function startCountdown(url) {
    let countdownValue = 10;
    countdownOverlay.style.cssText= 'display:block';
    countdownMessage.style.cssText= 'display:block';
    countdownElement.textContent = countdownValue;

    const interval = setInterval(() => {
        countdownValue--;
        countdownElement.textContent = countdownValue;

        if (countdownValue === 0) {
            clearInterval(interval);
            unlockLink();
            countdownOverlay.style.cssText= 'display:none';
            countdownMessage.style.cssText= 'display:none';
            
            // Here I need to inject and execute Yllix ads
            // How can I achieve this without breaking the Ad units?
        }
    }, 1000);
}

});