Filament Group的loadCSS与Ajax

Question

Filament Group的loadCSS库似乎是异步加载CSS的实际标准。 甚至Google都建议使用该库。 但是，我想知道为什么不只使用ajax异步加载CSS。 像这样：

fetch('styles.css').then(response => {
  const el = document.createElement('style');
  el.textContent = response.text();
  document.head.append(el);
});

这会减少很多代码（使用错误处理或使用XHR会多一些），但是由于我认为Filament Group的人是非常聪明的人，所以我想知道我是否错过了Ajax方法的某些明显缺点。

那么loadCSS与ajax方法的优缺点是什么？

Answer 1

我自己发现了一个问题： 相对URL不再起作用 。

说明

想象一下一个CSS文件，其内容如下：

.background {
    background-image: url("../images/background.jpg")
}

该文件的URL类似于/assets/css/background.css ，因此可以在/assets/images/background.jpg下找到背景图像。 当我使用ajax加载CSS文件并使用样式标签对其进行内联时，我将得到如下内容：

<html>
    <head>
        ...
        <style>
            .background {background-image: url("../images/background.jpg")}
        </style>
    </head>
...
</html>

然后浏览器将不再找到背景图像，因为相对URL仍然是相对于CSS文件的原始位置而不是当前页面。

Filament Group的loadCSS与Ajax

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-11 10:29:57

说明

Filament Group的loadCSS与Ajax

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-11 10:29:57

说明

解决方案1
0 已采纳 2018-01-11 10:29:57