Отложенная загрузка CSS для определенного элемента на странице?

Question

Отложенная загрузка CSS для определенного элемента на странице?

VortexWeb.net Мыслитель (5831), закрыт 1 месяц назад

Подскажите, как сделать отложенную загрузку CSS стилей для определенного элемента на странице? И если это нужно сделать после выполнения определенного JS скрипта, например после нажатия кнопки, на элементе через 5 секунд появляются стили указанные в общем CSS файле.

Answer 1

Вот так например...
https://jsfiddle.net/51gj48sp/

 <!doctype html>  
<html lang="ru">  
<head>  
  <meta charset="utf-8" />  
  <title></title> 
  <style> 
    .st { 
      width: 50px; 
      height: 50px; 
      background-color: red ; 
    } 
  </style>   
</head>  
<body>  
 <button id="but">CSS</button>   
 <p id="countdown">Стиль загрузится через 10 секунд.</p>  
 <div id="div"></div> 
<script> 
but.onclick = function(){ 
let time = 10;  
const timer = setInterval(() => { 
  const countdownElement = document.getElementById('countdown');  
  if(time > 0) { 
    countdownElement.textContent = `Стиль загрузится  через ${time--} секунд.`; 
  } else { 
    clearInterval(timer);
    countdownElement.textContent = '';      
    div.className = 'st'; 
  }    
}, 1000); 
} 
</script>  
</body>  
</html>

Answer 2

партнер [www.a77r.ru] Мудрец (10028) 1 месяц назад

а в чем сложность? Средствами Javascript добавляешь атрибуты стиля тегам через необходимое время. Или вообще можно добавить блок style.

VortexWeb.netМыслитель (5831) 1 месяц назад

Дело в том что работает по типу колеса фортуны и при нажатии кнопки оно крутится ещё а ответ уже подсвечен, это сделано методом CSS

#roulette ul[data-number="1"]>:nth-child(1)>span{
animation-name: number-1;

А нужно подсветить сам элемент после остановки колеса, то есть через определенное количество секунд.

партнер [www.a77r.ru] Мудрец (10028) VortexWeb.net, если ты знаешь время, через которое колесо остановится, то не вижу никаких проблем запустить setTimeout в JS скрипт, который добавит стили.

VortexWeb.netМыслитель (5831) 1 месяц назад

Понял спасибо большое!

Answer 3

Можно попробовать подключить ссылку на css файл через 5 секунд
<link rel="stylesheet" />

<button>Click me</button>

*Поставить скрипт в конец html*
<script>
function getCSS() {
setTimeout(
document.querySelector('link')
.setAttribute('href', 'адрес к css файлу'), 5000);
}

document.querySelector('button'). addEventListener('click', getCSS);
}
</script>

Answer 4

на промисах это делается.. можно резолвить задержку как там: https://local-disc.firebaseapp.com/menu/articles/HashRouter.html#/blog

             // Применяем подсветку после задержки (только для '/blog') 
if (path === '#/blog') { 
    await new Promise(resolve => setTimeout(resolve, delay)); // Ожидание перед подсветкой 
    hljs.highlightAll();  // Подсветка для страницы blog 
} else { 
    hljs.highlightAll();  // Подсветка для других страниц без задержки 
}

Answer 5

 const button = document.querySelector('button') 
 
function handleAddStyles() { 
    setTimeout(() => { 
        const link = document.createElement('link') 
        link.rel = 'stylesheet' 
        link.href = 'styles.css' //путь к css файлу
        document.head.appendChild(link)  
    }, 5000) //задержка 5 сек 
} 
 
button.addEventListener('click', handleAddStyles)