JavaScript动态加载CSS的3种方式

本文深入探讨了JavaScript动态加载CSS的三种实用方法，旨在优化网站首屏加载速度，提升用户体验。核心策略是通过JavaScript创建``标签，并将其动态插入到HTML的`

`部分。文章详细讲解了如何设置`rel`属性为`stylesheet`，`href`属性为CSS文件路径，以及如何利用`onload`事件确保CSS文件加载完成，从而执行后续操作。此外，还介绍了如何避免重复加载同一CSS文件，提高页面性能。这种动态加载CSS的方法兼容性良好，适用于各种现代和旧版浏览器，是前端性能优化的有效手段。掌握这些技巧，开发者可以更好地控制页面资源加载，打造更流畅、更高效的Web应用。

通过创建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学习网公众号，带你了解更多关于的知识点！