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);
}
});