gpt4 book ai didi

javascript - Filament Group 的 loadCSS 与 ajax

转载 作者:行者123 更新时间:2023-11-28 03:49:19 26 4
gpt4 key购买 nike

长丝集团的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 方法的一些明显缺点。

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

最佳答案

我自己刚刚发现一个问题:相对网址不再起作用

说明

想象一个包含如下内容的 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 文件的原始位置而不是当前页面。

关于javascript - Filament Group 的 loadCSS 与 ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48163732/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com