如何在CSS中实现异步加载样式表_通过JavaScript动态创建标签

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

// 调用函数加载样式表
loadCSS('/path/to/styles.css');

const loadCSSWithCallback = (url, callback) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;

  if (callback) {
    link.onload = () => {
      callback(null, link);
    };
    link.onerror = () => {
      callback(new Error(`Failed to load CSS: ${url}`));
    };
  }

  document.head.appendChild(link);
};

// 使用示例
loadCSSWithCallback('/path/to/theme.css', (err, link) => {
  if (err) {
    console.error(err);
  } else {
    console.log('样式表已成功加载:', link.href);
  }
});

const loadCSSOnce = (url, callback) => {
  // 检查是否已加载
  const existingLink = document.querySelector(`link[href="${url}"]`);
  if (existingLink) {
    if (callback) callback(null, existingLink);
    return;
  }

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;

  link.onload = () => callback && callback(null, link);
  link.onerror = () => callback && callback(new Error(`Load failed: ${url}`));

  document.head.appendChild(link);
};

link.media = 'print'; // 只用于打印时加载
// 或者先设为无效值，稍后切换
link.media = 'not all'; // 初始不生效
// 加载后再改为：
link.media = 'all';