JavaScript动态加载CSS的3种方式

还在为首屏加载速度慢而烦恼吗？本文为你介绍 **JavaScript 动态加载 CSS 的 3 种实用方法**，轻松优化网页性能！通过动态创建 link 标签并插入 head，我们可以实现 CSS 文件的按需加载，有效减少初始资源体积，提升用户体验。本文详细讲解了如何创建 link 标签、设置 rel 和 href 属性，并监听 onload 事件确保 CSS 加载完成。同时，我们还提供了避免重复加载 CSS 的优化方案，确保代码高效运行。这些方法兼容性良好，适用于各类浏览器，助你打造更流畅的网页应用！

通过创建link标签并插入head可动态加载CSS，优化首屏加载；2. 设置rel为stylesheet、href为目标路径，并监听onload事件确保加载完成；3. 调用loadCSS函数时检查是否已存在相同href的link，避免重复加载；4. 该方法兼容性好，适用于大多数浏览器。

通过 JavaScript 动态加载 CSS 文件，是一种在页面运行时按需引入样式资源的常用方式。这种方法有助于优化首屏加载速度，减少初始资源体积。

创建 link 标签插入 DOM

最直接的方式是通过操作 DOM，动态创建一个 link 元素，并将其添加到页面的 head 中。

具体步骤如下：

• 创建 link 元素
• 设置 rel 属性为 stylesheet
• 设置 href 属性为目标 CSS 文件路径
• 将 link 插入到 document.head

示例代码：

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

// 调用
loadCSS('/path/to/style.css');

确保加载完成后再执行后续逻辑

有时需要在 CSS 加载完成后执行某些操作（例如显示依赖该样式的元素），可以通过监听 link 的 onload 事件实现。

示例：

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

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

  document.head.appendChild(link);
}

loadCSS('/path/to/theme.css', (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('CSS loaded successfully');
  }
});

避免重复加载

多次调用加载函数可能导致重复插入相同的 CSS 文件。可以通过检查已存在的 link 标签来避免这个问题。

改进后的版本：

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

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

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

  document.head.appendChild(link);
}

今天关于《JavaScript动态加载CSS的3种方式》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！