如何用css实现延迟加载外部样式-css教程-PHP中文网

如何用css实现延迟加载外部样式

P粉602998670

发布： 2025-10-23 13:28:02

原创

614人浏览过

答案：通过JavaScript控制外部样式表的加载时机可实现CSS延迟加载。具体方法包括：1. 动态创建link标签在DOMContentLoaded或load事件后插入；2. 利用media属性设置为非匹配条件，再由JS更改激活；3. 结合preload预获取资源并由JS延迟注入；适用于主题、动画、非关键响应式等样式，确保首屏关键CSS正常加载以提升性能。

如何用css实现延迟加载外部样式

CSS 本身没有直接实现“延迟加载”外部样式的能力，但可以通过 JavaScript 配合来控制 外部样式表的异步加载和延迟应用。这样可以提升页面初始加载速度，避免阻塞渲染。

1. 使用 JavaScript 动态加载 CSS 文件

将 link 标签的插入时机推迟到页面主体内容渲染之后，比如在 window.onload 或 DOMContentLoaded 事件中执行。

示例代码：

<script>
function loadCSS(href) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = href;
  document.head.appendChild(link);
}

// 页面加载完成后加载样式
window.addEventListener('load', function() {
  loadCSS('/path/to/your/style.css');
});
</script>

登录后复制

这种方式不会阻塞页面渲染，实现了“延迟加载”效果。

2. 利用媒体查询（media 属性）延迟非关键样式

通过设置 media 属性为非默认匹配条件，可以让浏览器延迟加载某些不立即需要的样式表。

例如，只为打印准备的样式不会立即加载：

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

壁纸样机神器

免费壁纸样机生成

查看详情

<link rel="stylesheet" href="print.css" media="print">

登录后复制

也可以结合 JS 在合适时机更改 media 值来激活加载：

<link id="lazy-style" rel="stylesheet" href="extra.css" media="disabled">

<script>
window.addEventListener('load', function () {
  document.getElementById('lazy-style').media = 'all';
});
</script>

登录后复制

3. preload + JavaScript 控制加载时机

使用 preload 提示浏览器提前获取资源，但由 JS 决定何时真正应用。

先预加载资源：

<link rel="preload" href="delayed-style.css" as="style">

登录后复制

再通过 JS 插入 link 标签启用：

window.addEventListener('load', function () {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'delayed-style.css';
  document.head.appendChild(link);
});

登录后复制

这样既利用了浏览器预加载机制，又实现了延迟应用。