JS延迟加载CSS的实现方法

function loadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

// 页面加载完成后延迟加载非关键CSS
window.addEventListener('load', () => {
  loadCSS('/styles/non-critical.css');
});

setTimeout(() => {
  loadCSS('/styles/lazy-theme.css');
}, 3000);

window.addEventListener('scroll', function onScroll() {
  loadCSS('/styles/extra-layout.css');
  window.removeEventListener('scroll', onScroll); // 只加载一次
});

function preloadAndLoadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = href;
  link.onload = () => {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = href;
    document.head.appendChild(style);
  };
  document.head.appendChild(link);
}