Web应用主题切换：如何检测link元素href更新后的样式表加载完成？

问题 #

我正在为Web应用实现主题功能，目前提供多个主题，用户可通过面板切换主题。我希望注册事件以检测主题样式表何时加载完成。

首次创建link元素并设置第一个主题时，onload事件可正常触发：

const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'first-theme.css'
link.onload = () => console.log('Theme loaded')

document.head.append(link)

但切换主题时，我直接更新现有link元素的href，此时即使新样式表已加载，onload事件也不会再次触发：

function changeTheme(theme){
  link.href = theme
}

值得注意的是，img标签的类似流程可正常工作，每次更新src都会触发onload：

const img = document.createElement('img')
img.src = 'https://picsum.photos/200'
img.onload = () => console.log("Image loaded")

document.body.append(img)

setTimeout(() => img.src='https://picsum.photos/300', 1000)
setTimeout(() => img.src='https://picsum.photos/400', 2000)

上述代码会三次打印“Image loaded”。

原因与解决方案 #

为什么link元素更新href不触发onload？ #

浏览器对<link rel="stylesheet">的加载机制和<img>不同：更新href时，浏览器不会重新触发onload事件，除非先移除原link元素再重新添加（或创建新元素）。这是因为样式表的加载和应用有更复杂的缓存与依赖处理逻辑，浏览器不会默认在href变更时重复触发加载事件。

解决办法 #

有两种可靠的方式实现主题切换时的加载完成检测：

方法1：每次切换创建新的link元素

移除旧的主题样式表，创建新的link元素并绑定onload事件：

let currentThemeLink = null;

function loadTheme(themeUrl) {
  // 移除旧的主题样式表
  if (currentThemeLink) {
    document.head.removeChild(currentThemeLink);
  }

  // 创建新的link元素
  const newLink = document.createElement('link');
  newLink.rel = 'stylesheet';
  newLink.href = themeUrl;
  newLink.onload = () => {
    console.log('Theme loaded');
    currentThemeLink = newLink;
  };

  document.head.appendChild(newLink);
}

// 首次加载主题
loadTheme('first-theme.css');

// 切换主题时调用
loadTheme('second-theme.css');

方法2：利用onreadystatechange事件（兼容旧浏览器）

部分浏览器支持通过onreadystatechange监听样式表的状态变化，结合href变更前重置事件绑定的方式：

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

function changeTheme(themeUrl) {
  // 重置事件监听
  link.onload = null;
  link.onreadystatechange = null;

  link.onload = () => console.log('Theme loaded');
  // 兼容IE等旧浏览器
  link.onreadystatechange = () => {
    if (link.readyState === 'complete' || link.readyState === 'loaded') {
      console.log('Theme loaded');
    }
  };

  // 更新href触发加载
  link.href = themeUrl;
}

// 首次加载
link.href = 'first-theme.css';
document.head.appendChild(link);
// 切换主题
changeTheme('second-theme.css');

注意：方法2兼容性更好，但部分现代浏览器可能仍不触发onload，因此更推荐方法1，逻辑清晰且兼容性无问题。

内容的提问来源于stack exchange，提问作者undefined