Question

Filament Group＆＃39; loadCSS library似乎是异步加载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方法的一些明显缺点。 / p>

那么loadCSS与ajax方法的专业人士和专业人士有什么关系呢？

Answer 1

我自己发现了一个问题：相对网址已不再适用。

解释

想象一个包含如下内容的CSS文件：

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

文件的网址类似于/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 vs. ajax

1 个答案:

解释