在css中如何用JavaScript延迟加载样式-css教程-PHP中文网

在css中如何用JavaScript延迟加载样式

P粉602998670

发布： 2025-10-15 08:23:01

原创

140人浏览过

延迟加载CSS可通过JavaScript动态控制样式表加载时机。1. 动态创建link元素，页面加载完成后引入非关键CSS；2. 结合用户行为或定时器延迟加载，如滚动或3秒后加载；3. 使用rel="preload"预加载资源，再切换为stylesheet以优化优先级。需确保仅延迟非关键CSS，避免布局偏移，并注意浏览器兼容性。核心是通过JS按需插入link标签实现。

在css中如何用javascript延迟加载样式

在网页性能优化中，延迟加载CSS是一种有效减少首屏加载时间的方法。虽然CSS通常是通过link标签直接引入的，但你可以使用JavaScript来动态控制样式表的加载时机，从而实现延迟加载。

1. 动态创建link元素

最常用的方式是通过JavaScript创建一个<link>标签，并将其添加到页面的<head>中。这样可以推迟样式表的实际请求时间。

示例代码：

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');
});

登录后复制

2. 设置加载条件或时间延迟

你也可以结合用户行为（如滚动、点击）或定时器来触发CSS加载，避免一开始就下载所有样式。

立即学习“Java免费学习笔记（深入）”；

例如，延迟3秒加载某个样式：

壁纸样机神器

免费壁纸样机生成

查看详情

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

登录后复制

或者等用户滚动页面后再加载：

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

登录后复制

3. 预加载提示（可选优化）

如果你希望浏览器提前发现资源但不立即应用样式，可以先用rel="preload"预加载，之后再切换为stylesheet。

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);
}

登录后复制

这种方式能提升加载优先级感知，同时控制实际渲染时机。

注意点：